CODEWITHSUNDEEP
css
silkfire
silkfire

Reputation: 26033

Position absolute on top of position fixed

I have a header div on my web page that has the property position: fixed. Right before this div I have an overlay div which I've given position: absolute, height: 100%, width: 100%.

The problem is that the overlay div does not cover the fixed width div (it covers the rest of the content as desired though). How do I make it cover the entire screen?

This has nothing to do with z-index by the way, the overlay div physically begins where the fixed header ends.

<body>
   <div id="overlay">
       <div id="dialog">
          <span><span>
          <button id="ok"></button>
       </div>
   </div>

   <div id="header-wrapper">
      <div id="header">
        ....
      </div>
   </div>

    ....
</body>

Upvotes: 1

Views: 1012

Answers (3)

Ajis
Ajis

Reputation: 1

Use this code

#overlay
{ 
position: fixed;
left: 0px; 
top: 0px; 
width: 100%; 
z-index: 1000000000;
}

It will work perfectly

Upvotes: 0

Nopesound
Nopesound

Reputation: 510

maybe I'm wrong but try this solution:

#header-wrapper{
    width:100%;
    display: inherit;
}
#overlay{

    position: fixed;
    height: 100%;
    width: 100%;
}

http://jsfiddle.net/silentgrave/8uwHB/

Upvotes: 0

Chris Hawkes
Chris Hawkes

Reputation: 12430

Your overlay should be the one with the fixed: 100% width and height. Any div's on top of this can be either fixed or absolute positioned. Beware of using this on webpages used by tablets and phones, it works horribly.

Upvotes: 3

Related Questions