revertir z-índice basado de la página para rendir

Question

Ejemplo de marcado:

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

Ejemplo CSS:

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

a través de JavaScript (jQuery) Estoy adjuntando un evento de clic a cada h2 que luego cambiar el contenido div para mostrar: bloque.

La intención es que estos sean bloques de contenido expandibles que se superpondrán a cualquier otra cosa en la página.

El problema es que me gustaría que el primero se superponga al segundo, que se superpondría al tercero en caso de que todos estén abiertos.

Sin embargo, dado que cada uno se renderiza DESPUÉS del anterior, el orden de apilamiento real se invierte (El último contenido div creado end sup superponiendo el creado anteriormente una vez).

¿Existe alguna manera ingeniosa de revertir este comportamiento con CSS/HTML? ¿O es la solución para permitir que la página se renderice, luego a través de javascript, toma todos los divs de contenido en orden y les da a cada uno un índice z en orden inverso?

ACTUALIZACIÓN:

Aquí hay algunas marcas más específico:

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

El siguiente marcado producirá 3 divs, cada uno con un div superposición de color. Debido al orden de renderizado, el último DIV (rojo) absolutamente posicionado estará encima del anterior (naranja).

No puedo averiguar qué tipo de índices z necesito aplicar para que el PRIMER div superpuesto en color esté en la parte superior. El orden de arriba a abajo en términos de índice Z debe reflejar el marcado (amarillo en la parte superior, rojo en la parte inferior).

Esto es, por supuesto, contrario al estándar.

Estoy dispuesto a usar javascript para corregir esta publicación posterior, pero todavía estoy luchando por el CSS exacto que necesito aplicar a través de JavaScript. ¿Es posible lo que estoy buscando?

Answer 1

Así que todavía no hay respuesta aquí, acabo de hacer algo similar, aunque mi solución es 100% hack, si alguien más viene a esta página, ¡funcionó!

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

sólo tenía eso y todo el tiempo que no he tenido más de 10 elementos que parece que funciona ...

Answer 2

Brillante nueva tecnología CSS FlexBox hace esto un poco más fácil, pero el inconveniente es el contenido real será revertido. Esto no tiene que ser un gran problema, es semánticamente extraño.

En resumen: envolver todo en un recipiente con estos estilos:

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

Ver los violines para un ejemplo de trabajo (Pase el ratón sobre los elementos wrapper para ver la acción).

Es útil si no desea confiar en javascript para comprobar dinámicamente z-indexes cada vez que actualiza el contenido.Si los elementos <div class="wrapper"> se insertan sobre la marcha (o por cualquier otro motivo, los estilos específicos no se pueden establecer de antemano) Las reglas CSS del ejemplo deberían ser suficientes para ocuparse de los índices z SI inserta el <div> s en orden inverso.

Ésta es la configuración actual: http://jsfiddle.net/dJc8N/2/

Y esto es lo mismo HTML, con CSS añadido (notar los números en los <h2> etiquetas): http://jsfiddle.net/Mjp7S/1/

EDIT:

El CSS que publiqué probablemente no esté listo para copiarse aún. Esto, sin embargo, es:

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

Aquí es función SASS para la respuesta más común:

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

Answer 4

que tenía exactamente este problema, pero un número indeterminado de elementos, y posiblemente demasiados para hacer que el CSS hack publicado por jamie-wilson factible. Además, dado que mi página se genera dinámicamente con PHP, no quería preocuparme por invertir el orden de todo en DOM y usar flexbox como lo sugirió Sandy Gifford. He encontrado una solución extremadamente sencilla y elegante jQuery para usar en su lugar:

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

}); 

yo no puedo hablar de lo performant esto es, pero con ~ 35 artículos que no noté ningún retraso.