MatelJoker
New Member
I have a fixed position div (header), that has a child div with position absolute that I would like to be on top (in terms of z-index) of everything, but I cant seem to figure out how to do this. The child div with absolute position has a height greater than the header but does not extend over. The fiddle is here. \[code\]<!doctype html><html lang="en"><body> <div class="container"> <div class="header"> <div class="center"> <div id="pgSearch" class="search-box"> <div class="input-results"> <p>this should extend over the red part</p> </div> </div> </div> </div> <div class="content"> <div class="center"> <p>content</p> </div> </div> </div><!--container--></body></html>.container { width: 100%; height: 100%; padding-top: 89px; position: relative; z-index:10; background:red;}.header { position: fixed; height: 89px; display: block; padding: 0 20px; top: 0px; left: 0px; right: 0px; overflow-y: hidden; background: green; z-index: 500;}.search-box { width:300px; float:left; position:relative; z-index:501;}.search-box .input-results { position: absolute; top:10px; left: 1px; width:300px; height:300px; z-index:9999; background: white;}\[/code\]What I want is for the white div (input-results) to be on top of everything, but instead it cuts off at the end of the header div which is fixed.I'm losing my mind trying to figure this out.