z-index entre deux colonnes absolument positionnées?

J'ai une disposition à deux colonnes avec deux divs positionnés «absolus».z-index entre deux colonnes absolument positionnées?

#left { 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 0; 
    } 

    #right { 
     position: absolute; 
     top: 0; 
     left: 0 
     z-index: 0; 
    }

Dans chaque colonne, j'ai des images et je les aime pour pouvoir chevaucher dans différentes configurations avec z-index. En utilisant wordpress, #left est rempli de posts d'une catégorie puis, #right est rempli.

Est-il possible pour une image de #probablement être positionné au-dessus d'une image dans #right mais pas tous? En substance - les z-index entre deux div séparés peuvent-ils être l'un par rapport à l'autre?

J'ai attribué z-index pour les images dans #probablement supérieur à celui de #right, mais les images dans #right sont toujours sur le dessus. Je suppose que c'est quelque chose à voir avec le fait que #left apparaît en premier dans le code?

enter image description here

Source

2011-04-12 waffl

si elle est une option pour les divs d'être position:relative alors quelque chose comme cela pourrait fonctionner

http://jsfiddle.net/pxfunc/ZRCke/

HTML:

<div id="left"> 
    <img id="l1" src="http://placehold.it/300x200/f00" /> 
    <img id="l2" src="http://placehold.it/80x150/f00" /> 
    <img id="l3" src="http://placehold.it/150x100/f00" /> 
</div> 
<div id="right"> 
    <img id="r1" src="http://placehold.it/250/00f" /> 
    <img id="r2" src="http://placehold.it/250x150/00f" /> 
</div>

CSS:

#left {position: relative;width:50%;} 
#right {position: relative;margin-left:50%;width:50%;} 
div img {position: absolute;} 

#l1 {top: 50px;right: -50px;z-index:10} 
#l2 {top: 300px;right: -10px;z-index:30} 
#l3 {top: 500px;right: 20px;z-index:50} 

#r1 {top:100px;left:-20px;z-index:20} 
#r2 {top:400px;left:-30px;z-index:40}

sinon je serais obligé d'aller avec la réponse @ SnakeFaust

Source

2011-04-12 16:58:34 MikeM

Merci, j'ai fini par faire quelque chose comme ça. Le problème était que, puisque les colonnes étaient alimentées dynamiquement via wordpress, il n'était pas possible de savoir quelle position haute attribuer. J'ai fini par utiliser php pour récupérer la hauteur de l'image à partir de wordpress et calculer automatiquement la hauteur maximale de chaque image. Fonctionne bien maintenant, merci pour la réponse! (Et je n'ai jamais vu jsfiddle auparavant, c'est fantastique) – waffl

Juste une idée: pourquoi ne pas utiliser un div pour chaque image? Je veux dire, un div par image ...

Source

2011-04-12 16:01:59 elvenbyte

No.

Une fois que vous mettez position: absolute sur ces conteneurs, chacun établit son propre « contexte d'empilement » et éléments à l'intérieur ne sera z positionné par rapport à chaque autre. Il y a une bonne explication des contextes d'empilement à TimKadlec.com -- Detailed Look at Stacking in CSS

Source

2011-04-12 16:31:23 Faust

z-index entre deux colonnes absolument positionnées?

Répondre

Questions connexes