Shinori Posted November 14, 2017 Share Posted November 14, 2017 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 More sharing options...
dsonesuk Posted November 14, 2017 Share Posted November 14, 2017 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 More sharing options...
Shinori Posted November 14, 2017 Author Share Posted November 14, 2017 Ah. now it makes sense to me. Thank your very much dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now