[résolu] Z-index et position:relative

Voilà, je cherche à super-poser 3 images qui sont inclues dans un p.

<div class='largeboxcontenu'>
<p class='centrer'>
 <img src='images/fond-miroir.png' title='cadre du miroir' alt='cadre du miroir' class='niv0' />
 <img src='skin/pnj/gracieuse.png' title='nom' alt='alt' class='niv1' />
 <img src='images/reflet-miroir.png' title='reflet du miroir' alt='reflet du miroir' class='niv2' />
</p>
</div>

div.largeboxcontenu{
  margin-left:auto;
  margin-right:auto;
  width: 765px;
  background:url(images/skin/box-large-corps.png) repeat-y;
  overflow:hidden;
  padding-left:10px;
}
p.centrer{
  text-align:center;
}
img.niv0{position: relative; z-index: 0;}

img.niv1{position: relative; z-index: 1;}

img.niv2{position: relative; z-index: 2;}

La position relative est capitale, malheureusement pour moi.

Le truc c'est que si je mets mes images en fixed ou en absolute, le z-index marche très bien; mais la div ne s'étend pas (c'est logique en même temps) et l'image ne se centre pas.
Mais avec position : relative; les images se centrent bien, la div s'étend... mais le z-index ne marche pas. Le problème se pose sur opera, IE 9, FF 3.6, Chrome.
Modifié par Lothindil (08 Sep 2011 - 21:43)

Salut,

Tu ne pourra pas superposer des images en position relative, ce positionnement reste dans le flux.
Tu dois passer en position absolu pour faire une superposition.

Sinon une autre idée, serait d'imbriquer des balises et de leur appliquer tes images en background-image.

Mais une première chose importante, la taille des images est figée ou les images peuvent varier de dimension ?
Modifié par Spacedementia (08 Sep 2011 - 20:55)

les images sont de tailles fixes.

J'en ai une de 175x140; celle du milieu de 150x120; celle du dessus de 175x140...

Et au passage, c'est un bug généralisé le fait de ne pas accepter le position:relative ?

w3c a écrit :
Definition and Usage

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Très bien alors ce n'est pas compliqué on va trouver une solution.

Tout d'abord, non, il n'y a pas de bug tous les navigateurs à ma connaissance reconnaissent le positionnement relatif et le z-index attribué à un positionnement relatif.
Je penses simplement que tu n'arrives pas trop à voir exactement à quoi sert le positionnement relatif. Ce dernier permet entre autre de décaler un élément par rapport à sa position normale dans le flux, donc ça ne va pas nous servir sur tes images dans ton cas.

La logique serait donc :
Tu créer un <div> de largeur 175px et une hauteur de 140px avec des marges gauche et droite à "auto" ce qui va permettre de le centrer dans ton container "center".
Tu attribut à ton <div> que tu viens de centrer une position "relative" pour qu'il devienne le référentiel de positionnement de tes images.
Ensuite tu attribut à tes 3 images un positionnement "absolu". Elle seront donc toutes superposées avec leur coins en haut à gauche à la même positon. Si tu souhaites en décalée une ou plusieurs tu agit sur "left", "top", "bottom", "right".

Voila le tout est joué !
Modifié par Spacedementia (08 Sep 2011 - 21:13)

Ca marche nickel, un grand merci ^^

(au passage, pourquoi quand j'ai joué avec left,top,bottom et right sur la 2ème image, ça l'a envoyé au coin de ma div largeboxcontenu ?)

Pour répondre à ta question, dans tous les cas si tu as positionné en relatif le conteneur de tes images ton positionnement par défaut se fera toujours du coin haut gauche de ton conteneur.
Donc aucune raison que l'image se positionne par rapport a ton conteneur principal "largeboxcontenu".

Si par exemple tu veux qu'une de tes images soit alignée dans le coin en bas à droite de ton conteneur il te suffit d'indiquer right:0 et bottom:0
Modifié par Spacedementia (08 Sep 2011 - 22:28)

idiote j'ai oublié qu'opéra faut recharger 5 à 6 fois pour que ça charge complètement le CSS... il m'avait zappé le changement (la fameuse nouvelle div ^^' )

Ah oui effectivement ! ^^
Tu peux vider le cache de ton navigateur si tu as ce genre de problème. Ça t'évitera de rafraichir 15 fois
Bonne soirée