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

Question

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

Answer 1

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.

Answer 2

Simply add "position: relative" to your card div

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

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