Question

I have a web app that is modular on the back end.

I’m trying to create a pop-up div (“new feature”) notification in it.

The problem is that the module creating that DIV is executed before later modules, and as a result, the noification DIV is partially hidden by the later DIVs:

                       [ DATA DIV ]
                       [ //////// ]
-----------------------[ //////// ]--------------
| \\\ Notification \\\ [ //////// ] \\\ div \\\ |
-----------------------[ //////// ]--------------
                       [ //////// ]
                       [ //////// ]
                       [ //////// ]
                       [ END  DIV ]

Is there any way in CSS or JavaScript to do this so that the earlier notification DIV hides the later DATA DIV, not the other way around?

                       [ DATA DIV ]
                       [ //////// ]
-------------------------------------------------
| \\\ Notification \\\\\\\\\\\\\\\\\\\\ div \\\ |
-------------------------------------------------
                       [ //////// ]
                       [ //////// ]
                       [ //////// ]
                       [ END  DIV ]

Thanks !

Answer 1

To correctly position a DIV (or any elemnt on the page), you need to understand that the “vertical” (what is under what) positioning of elements is controlled by layers (see W3C Visual Formatting page, #9.9: Layered presentation for details).

The layers in which a given element are in are controlled by z-index CSS property (available in CSS2).

To place it on top, use higher value (default 0).

So if your 2 DIVs had IDs data and notification, use the following style (assuming data has no style of its own with z-index, and assuming both can have position: relative;):

#notification {
    z-index:999;
    position: relative;
}

It’s recommended to use a much-spaced values for z-index (e.g. 999 instead of 1) so you can easily layer many elements in between later.

Further reading:

• http://reference.sitepoint.com/css/z-index (has a good browser compatibility chart)

• W3C Schools (http://www.w3schools.com/cssref/pr_pos_z-index.asp)

• W3C Visual Formatting page, #9.9: Layered presentation