www-islambelgique-com
New Member
I want to put a modal popup on my website. It's html is like this:\[code\]<div id="thePopup" class="popup" style="display:none;"> <div class="popup-shadow">.</div> <h3>My Details</h3> <p>Message....</p></div>\[/code\]Then I have css (well, actually SASS, which compiles to css.) like this:\[code\].popup { z-index:10000; width:32em; position:absolute; left:20%; width:60%; .popup-shadow { position:fixed; top:0%; left:0%; width:100%; height:100%; z-index:9000; background-color:#999999; /* I have yet to do it, but the shadow will be slightly transparent */ }}\[/code\]There is a button that sets \[code\]thePopup\[/code\] to display:block when the user clicks it. The popup is nested inside one of the content panels on my website. it is \[code\]position:absolute\[/code\] so it appears above its parent panel when it is visible. I don't set \[code\]thePopup\[/code\] to \[code\]position:fixed\[/code\] as it could be bigger than the height of the users screen, and I want them to be able to scroll up and down on it. However, I want to darken everywhere on the screen that isn't the popup - to indicate to the user that they need to interact with it.This is where I run into problems - \[code\]popup-shadow\[/code\] is being rendered infront of \[code\]thePopup\[/code\], despite it having a lower z-level. I don't know why this is. If I take away the \[code\]popup-shadow\[/code\] div, \[code\]thepopup\[/code\] appears on screen as expected. Does anyone have any idea why this is? Will a child div always be rendered on top of its parent, even if it has a lower z-index?