Какова связь между z-index и css Position?

Question

Какова связь между z-index и css Position:?

Работает ли z-index только если определены position:absolute или relative или fixed?

Разве это никогда не работает со статическим положением?

Когда z-index создает проблему в IE? Как использовать осторожно?

Answer 1

z-index определяет порядок расположения элементов относительного, абсолютного и фиксированного положения. Это означает, что он будет работать только в том случае, если ваш элемент имеет один из этих типов позиций.

.some-element {
    position: relative;
    z-index: 1;
}

.another-element {
    position: absolute;
    z-index: 2;
}

В приведенном выше примере .another-element будет помещаться выше .some-element, поскольку он имеет более высокий z-индекс.

Проблема со старыми версиями IE заключается в том, что z-index учитывается только в том же стековом контексте . Это означает, что в следующей настройке z-index не обязательно будет работать правильно, если два изображения перекрываются:

HTML

<div id="elem1">
    <img src="foo.jpg"/>
</div> 
<div id="elem2">
    <img src="bar.jpg"/>
</div>

CSS

#elem1 {
    position: relative;
}
#elem1 img {
    position: relative;
    z-index: 1;
}
#elem2 {
    position: relative;
}
#elem2 img {
    position: relative;
    z-index: 2;
}

Причина в том, что оба изображения находятся в своем собственном контексте стека, поскольку # elem1 и # elem2 являются position: относительными.

Answer 2

Обратите внимание на раздел Applies to: спецификации :

'z-index'
   Value:     auto | <integer> | inherit
   Initial:   auto
   Applies to:    positioned elements 

-

И вы можете легко использовать индекс, чтобы найти определение позиционирования