How to position two divs on the absolute front of a page, but with one over the other? CSS

Tags: javascript,css

Problem :

I'm creating a custom overlay popup. To do it, I'm laying a masking div over the page with width/height at 100% and opacity at 0.8. The popup is another div laid on top of the masking div.

I'm writing a function to hide these two divs if the masking div is clicked on. This will 'close' the popup window.

To test this function I'm using a Javascript alert. I've noticed the alert is still triggered when clicking on the popup div, not just the masking div. This indicates that the popup div is not positioned to the absolute front. I've also noticed the text in the popup div is slightly opaque indicating it's also being affected by the masking div.

How can I position the masking div to the absolute front?


Solution :

use stopPropagation() to make the event not bubble up the dom

    CSS Howto..

    How to create a two column layout

    How to make a drop-right menu?

    How to write css for a div under a div which specific id which is itself under a div with specific class?

    How to use inline css styling (style=“vertical-alignment:middle;”) in html5 or