Jump to content

z-index despite position: relative not working?

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: 

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

Here is my CSS:

	position: relative;
	z-index: 999;
	display: block;
	background-color: red;

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

Share this post

Link to post
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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...