Nie rozumiejąc układania kontekst pseduo-elementów

Question

Oto moja jsfiddle: http://jsfiddle.net/vSJnL/4/

Moja #generated div ma z-index z 1 podczas pseudo-element ma z-index -1 ale tekst DIV jest pokazany tylko zamiast div pojawiającego się nad wygenerowaną treścią, tak jak się spodziewałem. Także jeśli podaję pseudoelementowi dodatni indeks z i div a większy indeks z, <div> pozostaje behind the pseudo-element ..

Czy ktoś może wyjaśnić, dlaczego tak się stało?

Answer 1

Załóżmy, że zawartość nie będzie pusty (dla jasności), tj content: "generated";: http://jsfiddle.net/vSJnL/5/

Wtedy to uczynić jak:

<div id="over"> 
    <div id="generated"> 
    Hello World! 
    <span>generated</span> 
    </div> 
</div> 

Zobacz http://jsfiddle.net/vSJnL/6/

Zobacz specyfikację w W3C: http://www.w3.org/TR/CSS21/generate.html#before-after-content

Więc wygenerowany element jest wewnątrz div # wygenerowany po węźle tekstowym, a nie po tym, jak div # sam wygenerował.

Mając to na uwadze kontekst Stacking jest oczywista: pseudo-element z z-index: -1 staje się najniższa układania pozycji (tylko tło jest pod spodem). W rezultacie Textnode pokrywa się z pseudoelementem.

Answer 2

eksperymentowałem ze swoimi elementów HTML:

<div id="over" class="case{0,1,2}"> 
    <div class="generated">Hello World!</div> 
</div> 

i spojrzał na 3 przypadkach stosując następujący CSS. I zmienił stylistykę generowanej zawartości nieznacznie tylko dla demonstracji:

.generated { 
    background-color: gray; 
    border: 1px dotted black; 
    color: white; 
    width: 20rem; 
    position: relative; 
} 
.generated::after { 
    content:"\00A0"; 
    display: block; 
    width: 0; 
    height: 0; 
    border-width: 20px; 
    border-color: khaki blue khaki red; 
    border-style: solid; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

.case0 .generated { 
} 
.case0 .generated::after { 
} 

.case1 .generated { 
} 
.case1 .generated::after { 
    z-index: -1; 
} 

.case2 .generated { 
    z-index: 200 
} 
.case2 .generated::after { 
    z-index: -1; 
} 

Domyślnie nie ustawić z-index i zawartość generowana jest wykonany przesuwać nad treścią notatki tekstowe, tylko nakładających zawartości przy użyciu bezwzględna pozycjonowanie.

W przypadku 1, należy zastosować z-index: -1 do wygenerowanej treści i przesuwa się ona poniżej elementu.

W przypadku 2, stosuje z-index: 200 (lub jakąkolwiek liczbę 1 lub więcej) do .generated i z-index: -1 generowanemu zawartości w tym przypadku pojawia się zawartość generowane między tekście węzła i elementu.

W przypadku 1, po prostu przesuwasz indeks Z wygenerowanej treści 1 w dół osi Z. Ponieważ tekst węzła i jego kontener znajdują się na tym samym poziomie osi Z, wygenerowana treść pojawia się pod tekstem kontenera i węzła.

W przypadku 2 przesuwasz tekst węzła z jego kontenera, a następnie przesuwasz wygenerowaną zawartość o 1 poniżej tekstu węzła, tak aby wygenerowana zawartość znajdowała się nad kontenerem, ale poniżej tekstu węzła.

Może to być przydatna technika CSS.

odniesienia

Fiddle: http://jsfiddle.net/audetwebdesign/9sR8B/