Pourquoi un Relative se place toujours en dessus d'un float

[destroyedlolo]

Bonjour,

j'ai 3 elements defini comme suit :

div.navigation {
		/* Position */
	float: left;
	width: 15%;
	margin-bottom:0;
	z-index: 2000;
}

.ombre {
	z-index: -1;
	background: url(/Images/ombre.png) no-repeat bottom right;
	margin: 6px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
	padding: 0px;
}

.contenu_ombre{
	z-index: 0;
	position: relative;
	bottom: 6px;
	right: 6px;
	margin:0;
	padding:0;
}

navigation me cree un petit menu sur la gauche, alors que ombre et contenu_ombre me cree une zone de saisie.

Le probleme est que contenu_ombre est systematiquement place au dessus du menu, et ce, quelque soit la valeur de leur z-index respectif. D'apres les tests que j'ai fait, c'est position: relative; qui cree le probleme.

Comme faire pour avoir le menu au dessus du reste ?

Merci

Laurent

PS: je n'est vu ce probleme qu'avec FF2. Avec IE, la forme est placee plus bas dans la page.

[parisiana]

Bonjour,

tu peut placer ton bgimage dans div.navigation - c'est mon choix... et plus éfficace IMHO (in my humble opinion)

[destroyedlolo]

Salut parisiana,

Je suis desole, mais je ne comprend pas ce que tu veux dire.

Tu suggere que je cree l'ombre par un bgimage plutot que par 2 div imbriques ?

[destroyedlolo]

Bonsoir,

je réveille ce vieux post car je viens de mettre mon site en live et vous pouvez voir sur la page suivante ce que ca donne :

http://sillingy.clubphotos.fr/lvdo/

J'ai aussi le probleme sur d'autres pages mais j'ai mis en place une solution temporaires ...

Si qq'un avait une idee, ca m'arrangerait grandement.

Bye

Laurent

[Skyll]

Bonjour,

Bon je n'ai pas regardé trop ton code en détail mais il me semble qu'une possibilité rapide pour avoir un affichage relativement correct des blocs c'est de passer ton bloc div.ombre en float left et (dans mon test j'avais viré aussi les z-index). et il viendra s'empiler à coté du menu. J'ai testé sous IE 7 et FF2.

J'ai téléchargé ta page et style en local pour voir ça et voilà le resumé de ce que j'ai fait pour avoir un affichage correct (ensuite à toi de voir pour les subtilités).

dans le code HTML :

<form method="post">
<div class="ombre">
	<div class="zone encadree contenu_ombre">

Dans les CSS :

.ombre {
	float:left;
	background: url(/Images/ombre.png) no-repeat bottom right;
	margin: 6px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
	padding: 0px;
}

.contenu_ombre{
	bottom: 6px;
	right: 6px;
	margin:0;
	padding:0;
}

J'espère que cela répond à ce que tu voulais.

[destroyedlolo]

Ok Skyll, merci pour ta solution que j'ai mis en place.

Par contre, il me reste d'autres pages ou elles ne fonctionnerait pas.

Je mettrais a jour ce sujet des que j'aurai mis en ligne une page qui montre le probleme.

L'ideal serait que j'arrive reelement a faire passer les boites ombrees derrieres, mais les z-index ne semble pas servir a grand chose ...

[Skyll]

Bonjour,

J'utilise assez rarement les z-index mais je me souviens avoir bataillé pour qu'ils soient pris en charge correctement et pour aiguiller tes travaux dans ce sens il me semble que la condition que j'avais trouvé pour que les z-index fonctionnent c'est de définir l'instruction 'position' pour chaque bloc.

Dans un de mes projets j'avais eu ce problème, si mes souvenirs sont bons, j'avais dû définir le type de postion de chaque bloc explicitement. Et si on regarde tes CSS, tu n'as pas défini d'instruction de position pour tous les blocs qui font appel aux z-index aussi ils ne sont pas pris en charge.