Comment faire un équivalent à z-index que pour IE6

**whitespirit** · 13/05/2008, 13h02

Bonjour,

Excusez mes questions peut-être posé et reposé. Je ne trouve pas de solutions directes sur google. L'ex-graphiste de ma société à coder en cochon certains styles et je ne peux que modifier le style existant.

Dans un cas, il a utilisé un z-index pour que le logo se superpose à la div au dessus. Mais sous IE6, le logo est coupé là ou commence la div supérieure. Je ne peux pas utiliser beaucoup de style (par exemple, position absolute fracasse la mise en page actuelle).

Peut-être qu'il existe un hack pour que le z-index soit interpreter par ie6 ???

Merci

**Er3van** · 13/05/2008, 13h09

Malgré tes réticences, si tu dois faire encore d'autres modifs de ce type, les commentaires conditionnels sont recommandés, car plus propre, et en plus ça te permet de voir quelles modifs tu apportes pour IE.

z-index ne fonctionne QUE pour le positonnement absolu, rien à voir avec un qqconque hack. C'est reconnu par ie mais c'est invalide dans un positionnement flottant.

**whitespirit** · 13/05/2008, 13h19

hey, c'est vraiment du rapide dans ce forum.

Merci beaucoup, j'ai résolu très facilement ce pb en suivant ton post :

j'ai ajouté :

Code :

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

1
2
3
4
5
 
.logo img
{
position:absolute;
}

Du coup l'image du logo est en absolue... Franchement merci et bravo (merci d'avoir toujours une page ouverte vers le forum et bravo pour la qualité des réponses). 2 posts résolu en 5mn !!!

**Candygirl** · 13/05/2008, 14h02

Envoyé par Er3van

z-index ne fonctionne QUE pour le positonnement absolu

z-index est appliquable aux éléments positionnés, donc aussi valable pour le positionnement relatif.

**Er3van** · 13/05/2008, 14h40

Comment ça ? :S
J'suis curieux de voir ça puisque je n'ai jamais réussi à valider un z-index en relatif....

**Candygirl** · 13/05/2008, 15h30

Le code suivant:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>z-index</title>
<style type="text/css">
* {margin:0;padding:0;}
 
div {position:absolute;background-color:red;width:100%;}
p {background-color:green;}
</style>
</head>
 
<body>
<div>div</div>
<p>paragraphe</p>
</body>
</html>

Le div est dessus le p, logiquement puisque position:absolute.

Tu rajoutes ensuite un position:relative sur le p; il passe logiquement au-dessus du div.

Tu rajoutes un z-index de 1 sur le div, le div passe au-dessus, tu rajoutes un z-index de 2 sur le p et hop, il repasse dessus. Le z-index est donc bien pris en compte.

cqfd

**Er3van** · 13/05/2008, 15h39

Ok, mais faut quand même que tu aies un div qui soit en positionnement absolu, avec deux div en positionnement relatif tu ne peux pas arriver à ce résultat ( puisque tu ne peux pas superposer deux éléments du flux, ils se "poussent" ). Il te faut un div en positionnement absolu pour sortir du flux.

A moins que t'aies une autre façon ? :S

Comment faire un équivalent à z-index que pour IE6

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager