Dlaczego z-index jest ignorowany z pozycją: static?

Question

Zobacz ten komentarz from jquery-ui

// Ignore z-index if position is set to a value where z-index is ignored by the browser 
// This makes behavior of this function consistent across browsers 
// WebKit always returns auto if the element is positioned 

widzę, że jQuery jest zIndex() zwraca 0, jeśli element jest position: static.

Czy z-index nie jest obsługiwany na pozycji: statyczny? (To działa na mnie w Chrome, nie testowałem cross-browser)

Answer 1

Ponieważ position: static oznacza "Ignoruj ​​wszystkie instrukcje pozycjonowania z left, top, z-index, itp."

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

- http://www.w3.org/TR/CSS21/visuren.html#z-index

Element mówi się, że umieszczone, jeśli jego 'Pozycja' ma inną wartość niż 'statyczne'.

- http://www.w3.org/TR/CSS21/visuren.html#positioned-element

Answer 2

z-index nie jest ignorowany dla Flex-przedmioty (natychmiastowe dzieci giętkiego pojemnika, element z display: flex lub display: inline-flex). Od w3c flexbox spec:

Flex items farby dokładnie taka sama jak bloki inline CSS21, z wyjątkiem tego order modyfikowany kolejności dokumentu jest używany zamiast surowej kolejności dokumentu i z-index wartości inne niż auto stworzyć kontekst układania nawet jeśli jest staticposition .

Tak że mamy ten układ z nakładających się (.flex-item-two pokrywa .flex-item-one stosując marże np ujemne):

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.flex-item-one { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin-right: -50px; 
 
} 
 

 
.flex-item-two { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
}

<div class="flex"> 
 
    <div class="flex-item flex-item-one">One</div> 
 
    <div class="flex-item flex-item-two">Two</div> 
 
</div>

Jeśli flex-item-one indeks jest większy niż .flex-item-two „s, .flex-item-one następnie pokrywa się .flex-item-two.

.flex { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.flex-item-one { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin-right: -50px; 
 
    z-index: 1; 
 
} 
 

 
.flex-item-two { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
}

<div class="flex"> 
 
    <div class="flex-item flex-item-one">One</div> 
 
    <div class="flex-item flex-item-two">Two</div> 
 
</div>