28173 sujets

CSS et mise en forme, CSS3

Problème de z-index

Bonjour tout le monde Smiley biggrin

J'ai fais une petite image représentative de ma page :
http://img76.imageshack.us/img76/8187/arriereavantplan1mq.jpg

Le cadre jaune est en z-index de 0, le cadre rouge en 1 et le texte (balise <p>) en 2.

Donc le cadre jaune passe en dessous du cadre rouge, et comme le texte ce trouve dans le cadre jaune, il passe lui aussi en dessous Smiley lol
Mais moi j'aimerais que seulement le cadre jaune passe en dessous, et non le texte, c'est pour ca que j'ai mis un z-index plus fort que le cadre jaune et que le cadre rouge, mais voila, sa marche pas Smiley bawling


Avez-vous un autre moyen ou la solution de ce "bug" ?

Merci beaucoup d'avance ! Smiley ravi
Le texte est dans un élément propre (à l'intérieur du cadre jaune) ?
À quoi ressemble ton code ?

Sinon, il me semble que les z-index ne sont actifs que sur les éléments positionnés (relatif ou absolu ou fixe).
Oui mon texte ce trouve bien dans le cadre jaune :

Css :
#fond {
	background:url('entete.jpg') no-repeat top left;
	position:absolute;
	top:0;
	width:99%;
	height:459px;
	z-index:1;
}
#contenu {
	position:absolute;
	top:200px !important;
	top:209px;
	left:76px;
	width:577px;
	background:url('corps1.jpg') repeat-y;
	z-index:0;
}

#contenu p {
	z-index:2;
}


Xhtml :
<body>
<div id="fond"></div>
<div id="contenu">
<p>texte</p>
</div>
</body>


C'est le plus basic possible Smiley cligne 
#contenu p {
	z-index:2;
}

Les paragraphes n'étant pas positionnés, la propriété z-index n'a pas d'effet.
mpop a écrit :

Les paragraphes n'étant pas positionnés, la propriété z-index n'a pas d'effet.


Bah, non, en effet, pour simplifier. Mais de toutes façons, s'ils étaient en position relative, le z-index n'agirait que dans leur contexte d'empilement, c'est à dire <div id="contenu">. Autrement dit, les paragraphes seraientt à l'avant plan du reste du contenu de ce <div id="contenu">, et de rien d'autre.

Comme le <div id="contenu"> est lui-même en dessous (z-index=0) du <div id="fond"> (z-index=1)dans un autre contexte d'empilement antérieur (le conteneur initial), ça fait plop.

je ne sais pas trop quel est l'effet recherché, mais c'est mal parti sans établir un contexte d'empilement unique. Par exemple, en faisant de <div id="fond"> le conteneur de tout le reste...
Modifié par Laurent Denis (13 Jul 2006 - 00:10)
Bon alors j'ai revu le code pour faire 1 empilement :
<div id="fond">
<div id="contenu">
<p>texte</p>
</div>
</div>


J'ai mis z-index 1 à fond et 0 à contenu, mais le z-index n'a pas l'air d'être pris en compte car l'image du contenu se trouve au dessus du fond Smiley decu
Sujet clos
Aller à