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

Version imprimable

13/05/2008, 13h02
whitespirit

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

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
13/05/2008, 13h09
Er3van

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.
13/05/2008, 13h19
whitespirit
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:

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 !!!
13/05/2008, 14h02
Candygirl

Citation:

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.
13/05/2008, 14h40
Er3van

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

Le code suivant:
Code:

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 ;)

13/05/2008, 15h39
Er3van

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

Code:

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:relative;background-color:red;line-height:1.25em;}
p {background-color:green; position:relative;margin-top:-1.25em;line-height:1.25em;}
</style>
</head>
 
<body>
<div>div</div>
<p>paragraphe</p>
</body>
</html>

Et tu joues du z-index pour inverser l'empilement... ou encore:

Code:

1
2
div {position:relative;background-color:red;line-height:1.25em;}
p {background-color:green; position:relative;bottom:1.25em;line-height:1.25em;}

13/05/2008, 16h00
Erwan31

Citation:

Envoyé par Er3van

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" ).

Si, il suffit de positionner l'élément en position:relative via les propriétés
de positionnement pour que 2 blocs en flux puissent se superposer sachant que le
dernier élément dans le code sera toujours positionné au-dessus de l'élément
précédent en l'absence de z-index.
13/05/2008, 16h12
Er3van

Donc à partir du moment où on définit top/left/right ou encore bottom on sort du flux ? Ou simplement ça nous permet d'utiliser z-index ?

Citation:

le dernier élément dans le code sera toujours positionné au-dessus de l'élément précédent en l'absence de z-index.

Oui, c'est le principe du flux, j'ignorais juste qu'on pouvais en sortir simplement en spécifiant un positionnement, je pensais qu'il fallait justement précisionnement le positionnement en tant qu'absolu.

Du coup, c'est normal que ton premier code ne marche pas vraiment Candy, le margin-top ne te positionne pas en dehors du flux, tu reste sur la même couche du z-index. Tu ne peux pas passer le fond vert devant avec ton margin.
13/05/2008, 16h25
Erwan31

Citation:

Envoyé par Er3van

Donc à partir du moment où on définit top/left/right ou encore bottom on sort du flux ? Ou simplement ça nous permet d'utiliser z-index ?

Ni l'un, ni l'autre. Un élément en position relative restera en flux normal mais sera
décalé de sa position initial. Le z-index est applicable aux éléments en position
fixe, absolue et relative sans que la présence de propriétés de positionnement
soit une condition nécessaire à son fonctionnement.
En revanche on peut dire qu'un élément en position absolue sans propriétés de
positionnement n'est pas véritablement hors flux puisqu'il se placera là ou il se
trouve dans le code.
13/05/2008, 16h31
Er3van
Ok ok....
Même si j'suis persuadé d'avoir déjà eu des cas où ça ne fonctionnait qu'en positonnement absolu...

Par contre, pour en revenir au code de Candy, ça fonctionne bien, mais petit bug :
Code:

1 2 div {position:relative;background-color:red;line-height:1.25em;} p {background-color:green; position:relative;margin-top:-1.25em;line-height:1.25em;}
Si on a un margin-top égal au line-height du précédent on obtient une superposition parfaite, et dans ce cas on ne peut voir le background-color, alors qu'on voit le texte. Explication ? :S

Avec tout ça j'me coucherai moins bête ce soir ^^
13/05/2008, 20h23
Candygirl

Citation:

Envoyé par Er3van

Si on a un margin-top égal au line-height du précédent on obtient une superposition parfaite, et dans ce cas on ne peut voir le background-color, alors qu'on voit le texte. Explication ? :S

Parce que tu utilises un navigateur genre IE7 :aie: ? D'où l'importance de ne pas prendre IE7 comme référence unique mais plutôt se baser sur une concordance FF/opera.

Sur IE, quand un élément avec un margin négatif n'a pas le layout, il bug... Rajoutes un width de 100% (pour donner le layout) sur les deux éléments et tu devrais avoir un résultat plus conforme aux recommendations w3c :)
14/05/2008, 07h55
whitespirit

Heu... Heureusement que je n'ai pas posé la question : "Qu'est-ce que l'univers ?", j'aurais eu ce matin 40 pages à lire :arf:

En tout cas, j'ai ajouté le code cité dans mon deuxième post img{position:absolute;} et ça à marché direct. Mais je comprends pourquoi.

En tout cas, merci encore, j'ai beaucoup appris sur ce sujet :ave:
14/05/2008, 09h15
Er3van

Au taf pas trop le choix, IE 6 imposé, mais effectivement le problème ne se pose plus une fois rentré chez moi sur mon 'tit FF :)

Pour ce qui est de l'univers, d'après la théorie de supergravité, dite théorie M, l'univers, on peut concevoir l'univers comme étant un univers à 11 dimensions maximale, reposant sur un ensemble de brane, particules extrêmement petites, aussi appelée cordes....

Fuseau horaire GMT +2. Il est actuellement 01h27.