CODEWITHSUNDEEP
javascripthtmlcsshidden
user308378
user308378

Reputation:

How can I get my earlier DIV to not be hidden by other later DIVs?

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 !

Upvotes: 1

Views: 113

Answers (3)

DVK
DVK

Reputation: 129491

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:

Upvotes: 3

Rémi Breton
Rémi Breton

Reputation: 4259

I assume your dynamically created div is absolute-positioned. Declaring z-index:1 with css will put it on top of the other divs, but only if they have a lower z-index.

Read more here.

Upvotes: 0

Scott
Scott

Reputation: 21890

CSS should easily bring the notification div in front of everything else.

 div#notification {
    position: relative;
    z-index:9999; }

Upvotes: 1

Related Questions