javascript - Get footer to display AFTER elements with z-index -

i have 1 div containing elements both relative & absolute position, both , without z-index.

i need div - footer, display after other visible elements. should start below end of lowest other element.

in html code, footer div occur after others. reason, renders under/overlapped others.

i can't figure out positioning or z-index can set make footer never overlapped other elements, , displays lowest/last on page.

you can see problem in fiddle: http://jsfiddle.net/patmeeker/9drr6qhr/

(later length of other elements change dynamically. not sure if concern, fiddle doesn't reflect yet)

it's because you're using position: relative top: 50px, render position 50px further top, in flow, it's position still in top without space, top: 0, cause footer doesn't have top value overlapped content div class relnoz.

to overcome this, should either give top: 50px footer , other sibling container (if any) or remove top: 50px .relnoz

here's updated fiddle

#relnoz{      position: relative;      top:50px;      border: 1px solid red;  }    #absnoz{      position: absolute;      top: 100px;      left:240px;  }    #relwithz{      position: relative;      left:70px;      z-index:3;  }    #abswithz{      position: relative;      left:370px;      z-index:3;  }    #foot{      position: relative;      top:50px;      border: 1px solid green;  }

<div id="relnoz">      <div id="absnoz">          absolute          </div>            <div id="relwithz">          relative/z-index          </div>            <div id="abswithz">          absolute/z-index            </div>          content<br>          content<br>          content<br>          content<br>          content<br>  </div>    <div id="foot">      footer<br>      footer<br>      footer<br>      footer<br>      footer<br>  </div>