CODEWITHSUNDEEP
javascripthtmlcsspositionz-index
Gabriel Diaconescu
Gabriel Diaconescu

Reputation: 1799

Element z-index css property

I have 3 elements, two on the same level, and one child, all having fixed position. I need to set the z-index properties to place the parent on the bottom, the element on the same level in the middle, and the child on top.

I've tried setting a higher z-index for the child, but it's not working.

<div class="red">
    <div class="blue"></div>
</div>
<div class="green"></div>

Here is the case http://jsfiddle.net/udENm/21/ (I need red on the bottom, green in the middle and blue on top, still maintaining red and greenon the same level).

My CSS is like this

.red {
    position: fixed;
    z-index: 2;
}

.green {
    position: fixed;
    z-index: 2;
}

.blue {
    position: fixed;
    z-index: 5;
}

Upvotes: 0

Views: 280

Answers (5)

Dancrumb
Dancrumb

Reputation: 27549

The z-index property only has effect within the stacking context of the containing element.

Put another way, given a bunch of block elements within the same parent element, you can control their front to back ordering pretty easily. However, z-index can only control the front to back ordering within this parent element and not within the global context.

So, you can move .blue backwards and forwards within .red all you like. You can also switch .red and .green around in the z-plane all you like too. However, you can't put .green between .red and .blue because they are in different stacking contexts.

EDIT Stacking context only applies to elements that are in the flow. If you use position:absolute, then you can do this. See Rick Calder's answer

Upvotes: 2

SomeShinyObject
SomeShinyObject

Reputation: 7811

Kinda like this?

http://jsfiddle.net/kBv7R/

HTML

    <div class="foo">
        <div class="child"></div>
         <div class="bar"></div>
    </div>

CSS

.foo {
    background: red;
    position: fixed;
    left: 50px;
    top: 50px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.bar {
    background: green;
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 5;
    width: 100px;
    height: 100px;
}

.child {
    background: blue;
    position: fixed;
    left: 90px;
    top: 90px;
    z-index: 6;
    width: 50px;
    height: 50px;
}

​

Upvotes: 0

Simon Carlson
Simon Carlson

Reputation: 1989

The green blocks z-index needs to be lower than the red ones. I used this CSS instead of the one you posted:

.foo {
    background: red;
    position: fixed;
    left: 50px;
    top: 50px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.bar {
    background: green;
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 1;
    width: 100px;
    height: 100px;
}

.child {
    background: blue;
    position: absolute;
    top:50%;
    left:50%;
    z-index: 5;
    width: 50px;
    height: 50px;
}

Works fine, as you can see green is now z-index 1, red is z-index 2 and the blue block has absolute positioning.

Upvotes: 1

Brian
Brian

Reputation: 2829

Z-index is relative in a way to the parent. Red is already at 2, and blue is only at z-index 5 compared to it's siblings, but not to outside elements like Green.

Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

Upvotes: 0

Rick Calder
Rick Calder

Reputation: 18705

Set your positioning to absolute and remove the z-index from the parent div (the red one) entirely. http://jsfiddle.net/calder12/udENm/32/

.foo {
background: red;
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}

.bar {
background: green;
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
width: 100px;
height: 100px;
}

.child {
background: blue;
position: absolute;
left: 40px;
top: 40px;
z-index: 5;
width: 50px;
height: 50px;
}

​

Upvotes: 2

Related Questions