IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Internet explorer z-index auto


Sujet :

Positionnement en CSS avec z-index

  1. #1
    Membre chevronné
    Avatar de ilood
    Inscrit en
    Mars 2005
    Messages
    468
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 468
    Par défaut Internet explorer z-index auto
    Bonjour
    J'aimerai d'abord savoir si IE 6,7 gère le z-index auto ?
    Je rencontre de gros prroblème à cause du "contexte d'empilement".

    Un exemple simple:
    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
    35
    36
    37
    38
    39
    40
    41
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>z-index</title>
    <style type="text/css">
    #alphabet { position: relative; z-index: 1; }
    #a,
    #b,
    #c,
    #d,
    #e,
    #f { position: absolute; height: 300px; width: 300px; }
    #aa, #ab,
    #ba,
    #ca,
    #da,
    #ea,
    #fa { position: absolute; height: 100px; width: 100px; }
    #a { left: 236px; background: #990000; z-index: auto; }
    #aa { left: 189px; top: 20px; background: #CC6633; z-index: 50; }
    #ab { left: 24px; top: 37px; background: #CC0000; z-index: 70; }
    #b { background: #FF00FF; left: 1px; top: 9px; z-index: 2; }
    #c { background: #00FFFF; left: 11px; top: 39px; z-index: 3; }
    #d { background: #0000FF; left: 214px; top: 87px; z-index: 4; }
    </style>
    </head>
     
    <body>
    <div id="alphabet">
    <div id="a">Placez ici le contenu de  id "a"
    	<div id="aa">Placez ici le contenu de  id "aa"</div>
        <div id="ab">Placez ici le contenu de  id "ab"</div>
    </div>
    <div id="b">Placez ici le contenu de  id "b"</div>
    <div id="c">Placez ici le contenu de  id "c"</div>
    <div id="d">Placez ici le contenu de  id "d"</div>
    </div>
    </body>
    </html>
    Sous Firefox, #aa et #ab passent au dessus de tous les blocs.
    Sous IE 6, 7 #aa et #ab ne passent pas au dessus de ces blocs.

    Connaissez-vous un moyen d'obtenir le même résultat sur ces 3 navigateurs ?


    Merci

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Sous IE, il faut positionner les éléments pour que le z-index ait un effet.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre chevronné
    Avatar de ilood
    Inscrit en
    Mars 2005
    Messages
    468
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 468
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Sous IE, il faut positionner les éléments pour que le z-index ait un effet.
    Il me semble que les éléments sont positionnés ? Non ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #alphabet { position: relative; z-index: 1; }
    #a, #b, #c, #d, #e, #f { position: absolute; .... }
    #aa, #ab, #ba, #ca, #da, #ea, #fa { position: absolute; ...}

  4. #4
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Il parlait peut-être des propriétés : top, left, right, bottom...
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  5. #5
    Membre chevronné
    Avatar de ilood
    Inscrit en
    Mars 2005
    Messages
    468
    Détails du profil
    Informations forums :
    Inscription : Mars 2005
    Messages : 468
    Par défaut
    Citation Envoyé par HiRoN Voir le message
    Il parlait peut-être des propriétés : top, left, right, bottom...
    Elles sont là...
    Ou... je rêve ?

  6. #6
    Membre Expert
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Par défaut
    J'ai déjà rencontré un problème similaire il me semble...

    Si je me souviens bien il semblerait que le z-index en question "reste relatif au parent" avec IE. Et donc il n'est pas possible de placer un élément "enfant" d'un "frère" par dessus un élément "auto" placé après. (dans ton cas aa et ab ne passent donc jamais devant b, c et d)

Discussions similaires

  1. Internet Explorer
    Par remid1985 dans le forum IE
    Réponses: 3
    Dernier message: 22/01/2004, 13h52
  2. Comment récupérer les adresses WWW dans Internet Explorer ?
    Par chaours dans le forum Web & réseau
    Réponses: 7
    Dernier message: 03/09/2003, 14h27
  3. Créer un plug-in pour Internet Explorer
    Par giaco dans le forum C++Builder
    Réponses: 4
    Dernier message: 25/06/2003, 18h12
  4. URL d'Internet Explorer
    Par dbourni dans le forum API, COM et SDKs
    Réponses: 5
    Dernier message: 06/12/2002, 08h56
  5. internet explorer
    Par numeror dans le forum Web & réseau
    Réponses: 2
    Dernier message: 22/07/2002, 09h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo