Jump to content

z-index despite position: relative not working?


Shinori

Recommended Posts

Dear potential helpers,

I try to darken the foreground of my website using a background-color.

I created a div which wraps all my other HTML stuff, applied position: relative; to it and a very great z-Index of 999.
All my other elements have a z-index of 100 or lower. Why isn't my div not shown in front of the other stuff?

In case the background-color of my div foreground is only shown behind all the other elements inside it.

Here is my HTML: 

<html>
  <body>
      <div id="foreground">
          <!-- All my other HTML stuff having relative positioning and z-index 100 or less -->
      </div>
  </body>
</html>

Here is my CSS:

#foreground
{
	position: relative;
	z-index: 999;
	display: block;
	background-color: red;
}

Maybe u guys have any idea what the matter with this one. Thank you!

Link to comment
Share on other sites

Because the child elements z-index level can only be in relation to other sibling elements within the parent, the parent container z-index can only be relative to elements of same sibling level.

Therefore you will need to create a sibling (NOT element that surrounds these siblings) child element (using position: absolute;), that will fill the area of the parent and apply a higher z-index level higher than its siblings.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...