Discussion :

[Ricou13]

Salut,

J'ai une div qui se trouve devant une image et j'aimerais la faire passer derrière

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
HTML
 
<div id="MorphAccueil">
	<a href="#"><img name="ObjAccueil-Image" src="photos/salonsirha2005.jpg" class="Orange" alt="Salon du Sirha 2005" title="Salon du Sirha 2005" height="225" width="300"></a>
	<div id="MorphLegende">
		<span class="legende">FC2, FC18, PIZ 6 au Salon du Sirha 2005 (Lyon)</span>
	</div>
</div>
 
CSS
 
#MorphAccueil {
	height: 225px;
	}
#MorphAccueil img {
	float: right;
	margin-left: 0.5em;
	border:1px solid red;
	background-color: green;
	z-index: 10;
	}
#MorphLegende {
	text-align: right;
	line-height: 0.8em;
	position: relative;
	top: 45%;
	border:1px solid blue;
	z-index: 0;
	}
.legende {
	font: bold 0.8em Arial, Sans-Serif;
	font-weight: bold;
	color: #003345;
	}

La multiplication des div est normale (le contenu est modifié dynamiquement)

Actuellement, la div de la légende se trouve devant l'image. De fait, lorsque la souris passe sur cette zone superposée de la div, le lien autour de l'image n'est plus réactif, le lien ne fonctionne plus et le curseur redevient une flèche.

Comment passer l'image en premier plan ? Les z-index ne changent rien.

[Ricou13]

Je précise que cela marche bien sous IE même sans les z-index.
C'est sous FF que ça cafouille.

[v4np13]

Tu veux que le div soit caché par l'image???

J'en vois pas trop l'interet mais je pense qu'il faudrait créer un div qui survole avec l'image en background

[Ricou13]

Non, ce n'est pas ça.

test le code ci-dessus. J'ai ajouté un background vert à l'image pour que l'intérieur soit opaque puisque vous n'avez pas la photo.
Bien que le texte de la légende soit aligné comme je le veux à gauche de l'image, tu verras que sa div, de bordure bleue, se superpose à l'image.

Ce qui a pour effet que lorsque tu survole l'image dans cette zone de superposition, le lien ne fonctionne plus. Mais en temps normal, il n'y a pas de bordure, ce qui fait que l'utilisateur, selon l'endroit où il se trouve sur l'image, peut activer ou non le lien.

C'est pour cela que je voudrais faire passer la div de la légende derrière afin qu'il n'y ai plus cette "dead zone" (pas celle de Stephen King ) lorsqu'on survol l'image.

Ouf, j'ai fini de parler. On peut respirer

[Ricou13]

Bon, j'ai pas trouvé la solution mais j'ai réglé mon problème en passant la légende en absolute avec un bottom à 0

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#MorphAccueil {
	height: 230px;
	position: relative;
	}
#MorphAccueil img {
	float: right;
	}
#MorphLegende {
	text-align: right;
	line-height: 0.8em;
	position: absolute;
	bottom: 0;
	width: 290px;
	margin-bottom: 0.5em;
	}

[ilood]

J'ai pas eu le courage d'aller vérifier.

Le z-index ne s'applique-t-il pas qu'aux blocs positionnés en absolu ?

[Ricou13]

Mais OOUUUIIII !!!

Je devrais regarder la doc plus souvent, moi. Y a marqué, en gros

...
Pour une boîte positionnée, la propriété 'z-index' spécifie :
...

Bon, d'accord, c'est pas en gros... mais c'est marqué quand même

Trop fort, le Ilood !!!

Simplement...

Je vais garder l'autre solution Parce que, au départ, la légende devait se trouver en bas, à gauche, de l'image. Mais comme je n'ai plus pensé à "bottom", je l'avais positionné au millieu (sa hauteur variant du fait d'un contenu dynamique).
En postant ce message, cela m'a fait réfléchir ( ) à la structure de mes éléments et j'ai trouvé la solution ci-dessus.
Avec cette solution en absolute, la légende est désormais en bas, quelque soit sa hauteur puisqu'elle s'agrandit vers le haut et je n'ai aucun pb de superposition.

Mais, par rapport au premier code, il suffit donc d'ajouter un simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

position: relative;

dans le CSS de l'image.