Geek Answers Handbook

Z-index of an absolute positioned div nested in a fixed position div

I have a fixed position div (header) that has a child div with an absolute position that I would like to be at the top (in terms of z-index) of everything, but I can't figure out how to do this. A child div with an absolute position has a height greater than the title, but does not extend.

The violin is here .

<!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; }

I want the white div (input-results) to be on top of everything, but instead it turns off at the end of the header correction.

I'm losing my mind trying to figure it out.

+4
source share
2 answers

You have:

 overflow-y: hidden;

in .header

This means that any content exceeding the height of the .header will be disabled. Remove this property if you do not need it

+11
source

You have overflow-y on .header set to hidden. This means that the white area collapses to a height. Change this to overflow-y: visible; and that should solve your problem.

+3
source

More articles:


All Articles