Элемент z-index css property

Question

У меня есть 3 элемента, два на одном уровне и один ребенок, все имеют фиксированное положение. Мне нужно установить свойства z-index, чтобы поместить родителя внизу, элемент на том же уровне посередине и ребенок сверху.

Я пробовал установить более высокий z-индекс для ребенка, но он не работает.

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

Вот случай http://jsfiddle.net/udENm/21/ (нужно red на дне, green в середине и blue на вершине, сохраняя red и green на том же уровне).

Мой CSS подобен этому

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

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

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

Answer 1

Зеленые блоки z-index должны быть ниже красных. Я использовал этот 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: 1; 
    width: 100px; 
    height: 100px; 
} 

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

прекрасно работает, как вы можете видеть зеленый теперь г-индекс 1, красный г-индекс 2 и синий блок имеет абсолютное позиционирование.

Answer 2

z-index Свойство имеет только эффект в пределах stacking context вмещающего элемента.

Положите другой путь, учитывая кучу блочных элементов внутри одного и того же родительского элемента, вы можете легко управлять их упорядочением спереди и сзади. Тем не менее, z-index может управлять только контролем спереди и сзади в этом родительском элементе, а не в глобальном контексте.

Итак, вы можете переместить .blue назад и вперед в пределах .red все, что вам нравится. Вы также можете переключить .red и .green вокруг в z-plane все, что вам нравится. Однако вы не можете поставить .green между .red и .blue, потому что они находятся в разных контекстах стекирования.

EDIT Сводный контекст применим только к элементам, находящимся в потоке. Если вы используете position:absolute, вы можете это сделать. См. Ответ Рика Колдера

Answer 3

Установите свое позиционирование на абсолютное и полностью удалите z-индекс из родительского div (красного). 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; 
} 

Answer 4

Z-index is relative in a way to the parent. Красный уже на 2, а синий - только на z-index 5 по сравнению с его братьями и сестрами, но не на внешние элементы, такие как Green.

Каждый контекст стекирования является самодостаточным: после того, как содержимое элемента укладывается в стек, весь элемент рассматривается в порядке укладки исходного контекста удержания.

Answer 5

Как это?

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; 
}