cofania z-index na podstawie strony czynią zamówienie

Question

Przykład Markup:

<div class="wrapper"> 
    <h2>Trigger</h2> 
    <div>This is some content</div> 
</div> 
<div class="wrapper"> 
    <h2>Trigger</h2> 
    <div>This is some content</div> 
</div> 
<div class="wrapper"> 
    <h2>Trigger</h2> 
    <div>This is some content</div> 
</div> 

Przykład CSS:

.wrapper {z-index: 1} 
.wrapper div {display: none; position: absolute;} 

Via javascript (jQuery) Jestem załączając zdarzenie kliknij aby każdy h2, która będzie następnie przełącz zawartość div na display: block.

Chodzi o to, że są to rozszerzalne bloki treści, które pokrywają się z pozostałymi elementami strony.

Połów jest taki, że chciałbym, aby pierwszy nakładał się na drugi, który pokrywa się z trzecim, jeśli wszystkie są otwarte.

Jednakże, ponieważ każdy z nich jest renderowany PO poprzednim, rzeczywista kolejność układania jest odwrócona (Ostatnia zawartość div utworzyła koniec sup nakładając poprzednio utworzony raz).

Czy istnieje sprytny sposób na odwrócenie tego zachowania za pomocą CSS/HTML? Czy jest to rozwiązanie pozwalające na renderowanie strony, a następnie za pośrednictwem javascript, chwytanie wszystkich elementów div w kolejności i nadawanie każdemu z nich w odwrotnej kolejności?

UPDATE:

Oto kilka specyficznych znaczników:

<div style="padding: 10px;">Hello World 
    <div style="position: relative; top: -5px;"> 
     <div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>overlapping</p></div> 
    </div> 
</div> 
<div style="padding: 10px;">Hello World 
    <div style="position: relative; top: -5px;"> 
     <div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>overlapping</p></div> 
    </div> 
</div> 
<div style="padding: 10px;">Hello World 
    <div style="position: relative; top: -5px;"> 
     <div style="position: absolute; background: red;"><p>This</p><p>is</p><p>overlapping</p></div> 
    </div> 
</div> 

Poniższy znaczników będzie produkować 3 div, każdy z kolorowym div kumulacji. Ze względu na kolejność renderowania, ostatni absolutnie pozycjonowany DIV (czerwony) będzie znajdował się na wierzchu poprzedzającego go (pomarańczowy).

Nie mogę określić, jaki typ z-indeksów muszę zastosować, aby uzyskać PIERWSZY kolorowy pokrywający się element div, który będzie na wierzchu. Kolejność z góry do dołu pod względem indeksu Z powinna odzwierciedlać oznaczenia (żółty na górze, czerwony na dole).

Jest to, oczywiście, odwrotność normy.

Jestem skłonny użyć javascript do naprawy tego post-displayu, ale wciąż walczę o dokładne CSS, które muszę zastosować przez javascript. Czy to, co robię, jest po dokończeniu?

Answer 1

Wciąż nie ma tu odpowiedzi, po prostu zrobiłem coś podobnego, mimo że moje obejście jest w 100% hackowe, jeśli ktoś inny przychodzi na tę stronę, to zadziałało!

#nav ul li:nth-child(1) { 
     z-index:10; 
    } 
    #nav ul li:nth-child(2) { 
     z-index:9; 
    } 
    #nav ul li:nth-child(3) { 
     z-index:8; 
    } 
    #nav ul li:nth-child(4) { 
     z-index:7; 
    } 
    #nav ul li:nth-child(5) { 
     z-index:6; 
    } 
    #nav ul li:nth-child(6) { 
     z-index:5; 
    } 

miałem tylko, że i tak długo, jak nie dostać ponad 10 elementów wydaje się działać ...

Answer 2

Shiny nowa technologia CSS schematu flexbox czyni to nieco łatwiejsze, ale minusem jest to, rzeczywista treść zostanie odwrócona. To nie musi być duży problem, jest po prostu semantycznie dziwaczny.

W skrócie: zawinąć wszystko w pojemniku z tych stylów:

display: flex; 
flex-direction: column-reverse; 

Zobacz skrzypce na przykład pracy (Najedź na wrapper elementów, aby zobaczyć akcję).

Przydaje się, jeśli nie chcesz polegać na javascript, aby dynamicznie sprawdzać z-indeksy za każdym razem, gdy aktualizujesz zawartość.Jeśli elementy <div class="wrapper"> są wstawiane w locie (lub z innego powodu, nie można z góry ustawić konkretnych stylów) Reguły CSS w tym przykładzie powinny wystarczyć do dbania o indeksy z, JEŚLI wstawisz <div> s w odwrotnej kolejności.

To aktualna konfiguracja: http://jsfiddle.net/dJc8N/2/

I jest to ten sam HTML, z dodatkiem CSS (zawiadomienie numerów w <h2> tagów): http://jsfiddle.net/Mjp7S/1/

EDIT:

Opublikowany przeze mnie CSS prawdopodobnie nie jest jeszcze gotowy do skopiowania. To jednak jest:

display: -webkit-flex; 
display: -moz-flex; 
display: -ms-flex; 
display: -o-flex; 
display: flex; 
-webkit-flex-direction: column-reverse; 
-moz-flex-direction: column-reverse; 
-ms-flex-direction: column-reverse; 
-o-flex-direction: column-reverse; 
flex-direction: column-reverse; 

Answer 3

Oto funkcja SASS dla górnej odpowiedź:

@for $i from 1 through 10 { 
    &:nth-child(#{$i}) { 
    z-index: #{10 - $i}; 
    } 
} 

Answer 4

miałem dokładnie ten problem, ale nieokreślona liczba elementów, a być może zbyt wiele zrobić CSS hack opublikowany przez jamie-wilson wykonalny. Ponadto, ponieważ moja strona jest generowana dynamicznie z PHP, nie chciałem się kłopotać odwróceniem porządku wszystkiego w DOM i korzystaniem z flexbox tak jak zasugerował Sandy Gifford. Znalazłem niezwykle proste i eleganckie rozwiązanie jQuery używać zamiast:

$(document).ready(function() { 

    var item_count = $('your-selector').length; 

    for(i = 0, i < item_count, i++) 
    { 
    $('your selector').eq(i).css('z-index', item_count - i); 
    } 

}); 

nie mogę mówić do wydajnych jak to jest, ale z ~ 35 pozycji nie zauważyłem żadnych opóźnień.