inversion z-index sur la base de la page ordre de rendu

Question

Exemple de balisage:

<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> 

Exemple CSS:

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

Je joins un événement click via javascript (jQuery) à chaque h2 qui sera ensuite change le contenu div pour afficher: block.

L'intention est que ce soient des blocs de contenu extensibles qui chevaucheront n'importe quoi d'autre sur la page. L'attrape est que je voudrais que le premier chevauche le second, ce qui chevaucherait le troisième dans le cas où tous sont ouverts.

Cependant, étant donné que chacun est rendu APRES le précédent, l'ordre d'empilement réel est inversé (le dernier contenu div créé fin superpose le précédent créé une fois).

Existe-t-il une manière intelligente d'inverser ce comportement avec CSS/HTML? Ou est la solution pour laisser la page de rendu, puis via javascript, saisir tous les divs de contenu dans l'ordre et leur donner chacun un z-index dans l'ordre inverse?

MISE À JOUR:

Voici quelques balises plus spécifiques:

<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> 

Le balisage suivant produira 3 divs, chacun avec un chevauchement div couleur. En raison de l'ordre de rendu, le dernier DIV (rouge) positionné en dernier sera au-dessus de celui précédant (orange).

Je n'arrive pas à comprendre quel type d'index z j'ai besoin d'appliquer pour que la première div superposée soit sur le dessus. L'ordre de haut en bas en termes d'index z devrait refléter le balisage (jaune en haut, rouge en bas).

Ceci est, bien sûr, inverse de la norme.

Je suis prêt à utiliser javascript pour corriger ce post-affichage, mais je me bats toujours pour le CSS précis que j'ai besoin d'appliquer via javascript. Est ce que je suis après faisable?

Answer 1

Donc, toujours pas de réponse ici, je viens de faire quelque chose de similaire, même si ma solution de contournement est 100% piratage, si quelqu'un d'autre vient à cette page, cela a fonctionné!

#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; 
    } 

Je viens d'avoir cela et aussi longtemps que je n'ai pas plus de 10 éléments, il semble fonctionner ...

Answer 2

nouvelle technologie CSS FlexBox Brillant fait un peu plus facile, mais l'inconvénient est le contenu réel sera inversé. Cela ne doit pas être un gros problème, c'est juste sémantiquement bizarre.

En bref: tout envelopper dans un récipient avec ces styles:

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

Voir les vièles pour un exemple de travail (vol stationnaire sur les éléments wrapper pour voir l'action).

C'est utile si vous ne voulez pas compter sur javascript pour vérifier dynamiquement les index z chaque fois que vous mettez à jour le contenu.Si les éléments <div class="wrapper"> sont insérés à la volée (ou pour toute autre raison, des styles spécifiques ne peuvent pas être définis à l'avance) Les règles CSS de l'exemple devraient suffire pour prendre en compte les index z si vous insérez les <div> s dans l'ordre inverse.

Ceci est votre configuration actuelle: http://jsfiddle.net/dJc8N/2/

Et c'est le même HTML, CSS ajouté (notez les numéros dans les <h2> tags): http://jsfiddle.net/Mjp7S/1/

EDIT:

Le CSS que j'ai posté n'est probablement pas encore prêt à être copié-collé. Cependant, est-ce,:

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

est ici fonction SASS pour la réponse haut:

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

Answer 4

J'ai eu exactement ce problème, mais un nombre indéterminé d'éléments, et peut-être trop nombreux à faire le CSS hack posté par jamie-wilson réalisable. De plus, comme ma page est générée dynamiquement avec PHP, je ne voulais pas m'embêter à inverser l'ordre de tout dans le DOM et à utiliser flexbox de la manière suggérée par Sandy Gifford. J'ai trouvé une solution extrêmement simple jQuery et élégante à utiliser à la place:

$(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); 
    } 

}); 

Je ne peux pas dire comment cela est performant, mais avec ~ 35 articles que je ne l'ai pas remarqué de retards.