What is the relationship between z-index and css Position :?

Question

What is the relationship between z-indexand css Position:?

Is z-indexonly working if position:absoluteeither relativeor or are defined fixed?

Does this never work with a static position?

When z-indexcreates a problem in IE? How to use carefully?

Answer 1

z-indexdetermines the stacking order of relative, absolute and fixed positions. This means that it will only work if your item has one of these item types.

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

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

In the above case, another element will add up above some element since it has a higher z-index.

IE , z- . , 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 : .

Answer 2

Applies to: :

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

-