Z-index et div

Bonjour,
Je buggue sur un problème de code qui demande du z-index. Voilà ce à quoi je voudrais arriver :



En rose c'est une div, fixe en largeur, dont la hauteur varie en fonction du contenu.
En bleu, une image de largeur et de hauteur variables qui devrait idéalement être centré en largeur par rapport à la div (la rose).
En vert, une seconde image, de taille fixe, mais dont la position est variable (issus du php) et dépend idéalement du coin en haut à gauche de l'image bleu.

Mon code actuel :

<div class='largeboxcontenu'>
	<p>Vous voyez ceci :<br /><img class='centrer niv1' src='images/cartes/cuilnen1.png' title='image de l&#39;objet' alt='image de l&#39;objet' /><img class='niv2' style='top:42px; left:126px' src='images/no-objectif.gif' title='image de l&#39;objet' alt='image de l&#39;objet' /></p>
        </div>

Avec le CSS :

.largeboxcontenu{
  margin-left:auto;
  margin-right:auto;
  width: 765px;
  background:url(images/skin/box-large-corps.png) repeat-y;
  overflow:hidden;
  padding-left:10px;
}

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

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

Ce qui me donne :


Soit :
-la div (rose) qui s'étend pas en hauteur.
-l'image bleue flotte au-dessus de la div vers la gauche
-l'image verte flotte entre la div et l'image bleue (manifestement, son point de base est le coin de la div)

J'ai tenté de changer les positions des images d'absolute à relative, j'y gagne le fait que la div s'étende (c'est chouette), mais je perds mon z-index (moins cool).

Je me doute qu'il faut une div autour des images sur lesquels les 2 images pourront s'ancrer (et qui servira de point de départ pour l'image verte), mais j'arrive pas à la faire.

Bonjour Lothindil,

Il faudrait en fait que ta boite verte soit dans ta boite bleue, elle même dans la boite rose... autrement dit, pour moi le plus direct serait de faire :

<div class='largeboxcontenu'>
	<div class='niv1'> 
		<img class='niv2' src='images/no-objectif.gif' alt='image de l&#39;objet' />
	</div>
</div>

avec un background-image pour .niv1 et bien sur toute les classes en position:relative; (et pour les marges tu joues avec padding). > Mais ça met l'image en fond (si ce n'est qu'un décors ça va, si c'est une image plus utile, niveau accessibilité ça peut vite devenir très moyen.. a voir)

En esperant que ça fasse au moins avancer le problème..


n'oublies pas de spécifier les height && width et top||bottom && left||right

.largeboxcontenu{
  position: relative;
  margin-left:auto;
  margin-right:auto;
  width: 765px;
  background-color:red;
  height:auto;
  padding-left:10px;
}

.niv1{
	position: relative;
	height:400px;
	width:400px;
	background-color:blue;
	top:0px;
	left:0px;
	}

.niv2{
	position: relative;
	height:110px;
	width:110px;
	background-color:green;
	top:0px;
	left:0px;
	}

Cette solution, je la connais, mais le truc c'est que niv1 est de taille très variable (surtout en hauteur).

Mais j'ai trouvé une alternative ce matin, ça m'aide pas à faire marcher les z-index, mais ça marche au moins ^^

<p>Vous voyez ceci :</p>
<div>
    <img style='vertical-align:top; position: relative; z-index: 2; top:42px; left:84px; height:20px; width:20px' src='images/no-objectif.gif' title='Votre position' alt='Votre position' />
    <img src='images/cartes/cuilnen1.png' title='image de l&#39;objet' alt='image de l&#39;objet' />
</div>

Là pour l'instant tout est sur l'html (la flemme de tester en modifiant le CSS, j'aime pas vider le cache toutes les 3 minutes), mais à part le "top" et le "left" (qui seront modifiés par php), le reste filera en css ^^

Il faut juste compter que les coordonnées doivent modifier de -[hauteur/2] pour top et de [largeur/2] pour left. Ce qui permet que la position réelle soit au milieu de la croix ^^