CODEWITHSUNDEEP
javascripthtmlcssz-index
PlaTyPuS
PlaTyPuS

Reputation: 385

HTML/CSS Put a DIV on top of other with z-index

I've 3 main layers in my website:

1) Main view with elements inside (#views in jsbin) - BOTTOM LAYER
2) Overlay (with white background opacity .8 #overlay in jsbin) - MIDDLE LAYER
3) Context menu (#contextmenu in jsbin) - TOP LAYER

When I show the context menu, the 3 layers are displayed correctly -> main view is "hidden" by the transparent overlay and the context menu is on the top.

Now my problem is that I want to pop out an element inside the main view. I want to display this element (#card1 in jsbin) between the context menu and the overlay...but I'm not able to achieve this. Is it possible?

Here is my jsbin: http://jsbin.com/gaxadaci/7/edit

Thanks for your help. Kind regards, Bastien

Upvotes: 0

Views: 1071

Answers (2)

Dazvolt
Dazvolt

Reputation: 697

Simply add "position: relative" to your card div

#card1 {
        z-index: 2;
        position: relative;
    }

JSbin http://jsbin.com/gaxadaci/13/

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324840

Add position:relative to the card; z-index is not applied to static elements.

It is important to note that if any parent of your "element to pop out" has its own z-index defined, then this method will not work (and there'll be no way to "pop it out") because that parent defines the stacking context for its children.

Upvotes: 2

Related Questions