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 :

IE, z-index et position:relative/absolute


Sujet :

Positionnement en CSS avec z-index

  1. #1
    Expert éminent Avatar de Mr N.
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 5 418
    Points : 6 449
    Points
    6 449
    Par défaut IE, z-index et position:relative/absolute
    Bonjour les gens

    J'ai mon div #cinq (relative) qui se met au dessus de mon div #quatre (absolute) sous IE, malgré le z-index.

    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
    42
    <style type="text/css">
    div {
        padding:1em;
        margin:1em;
    }
    #un {
        border:1px solid blue;
        background: #CCF;
    }
    #deux {
        border:1px solid red;
        background: #FCC;
    }
    #trois {
        border:1px solid green;
        background: #CFC;
        position:relative;
    }
    #quatre {
        border:1px solid orange;
        background: #FFC;
        position:absolute;
        top:0px;
        left:5em;
        height:20em;
        z-index: 200;
    }
    #cinq {
        border:1px solid purple;
        background:#FFEFFF;
        position:relative;
        z-index: 20;
    }
    </style>
    <div id="un">un
        <div id="deux">deux
            <div id="trois">trois
                <div id="quatre">quatre</div>
            </div>
        </div>
        <div id="cinq">cinq</div>
    </div>
    Sous IE:


    Sous Firefox/Chrome:


    Quelle est la cause du problème ? Comment corriger celà ?

    Merki

  2. #2
    Membre éclairé Avatar de pop_up
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    877
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Avril 2006
    Messages : 877
    Points : 786
    Points
    786
    Par défaut
    apparemment, c'est un bug IE7

    met aussi ton z-index: 200 sur le div #trois et ça devrait fonctionner.

    Voici le lien qui m'a aidé
    http://www.coolcoyote.net/category/i...tion-css-xhtml

  3. #3
    Expert éminent Avatar de Mr N.
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 5 418
    Points : 6 449
    Points
    6 449
    Par défaut
    ça marche !!! Thanks!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 7
    Dernier message: 25/06/2013, 14h12
  2. Passage de position:fixed à absolute, relative ou static
    Par FabienThot69 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 18/10/2011, 18h05
  3. position: absolute ou position: relative ?
    Par mexicanino dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 11/10/2008, 13h35
  4. Position relative/absolute FireFox
    Par GiZoX dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 22/08/2008, 17h52
  5. position() relative au noeud courant
    Par luta dans le forum XSL/XSLT/XPATH
    Réponses: 2
    Dernier message: 09/09/2004, 17h38

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