Discussion: Problème de z-index

  1. #1
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    475
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 475
    Points : 643
    Points
    643

    Par défaut Problème de z-index

    Bonjour à tous, Je n'arrive pas à comprendre mon erreur sur le z-index.
    Pour les besoins d'une animation avec un cube qui doit passer sur le <header> et le <nav>, je n'arrive pas à faire passer ce cube au premier plan.
    J'ai simplifié au maximum.
    • Le <header> est positionné en fixe et en z-index:1;
    • le <nav> est positionné en fixe et en z-index:1;
    • le <main> est non positionné et donc en z-index:0; de façon à passer sous le <nav> et <header>
    • et enfin le cube est positionné en relative avec un z-index:10;

    Et pourtant le cube est bien sur <header> et sur <main> mais en dessous de <nav>!

    https://codepen.io/JefReb/pen/PQmXZe

    Certainement une erreur stupide ou une erreur de compréhension du z-index. Merci pour votre éclairage.
    Code css : 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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    * {
    	margin: 0;								
    	padding: 0;								
    	border: 0;
    	box-sizing: border-box;			
    }
    html, body {
    	height: 100%;				
    	font-size: 100%;					
    }
    body {
    	font-family: "Times New Roman", Times, serif; 
    	font-size: 100%;																	
    }
    #page {
    	position: relative;
    	display: -webkit-flex;					/* préfixe -webkit- pour chrome							*/
    	display: flex;
    	-webkit-flex-direction: column;
    	flex-direction: column;
     
    }
    header {
    	height: 175px;
    	background-color: green;
    	position: fixed;
    	top: 0;
    	right: 0;
    	left: 0;
    	z-index: 1;
    }
    nav {
    	height: 35px;
    	background-color: blue;
    	position: fixed;
    	top: 176px;
    	right: 0;
    	left: 0;
    	z-index:1;
    }
    #page, #page > header, #page > nav {
    	width: 960px;
    	margin: 0 auto;
    }
    main {
    	margin-top: 215px;
    	height: 2000px; /* pour test */
    	background-color: yellow;
    }
    .boite {
    	width: 160px;
    	height: 160px;
    	position: relative;
    	top: 100px;
    	left: 200px;
    	background-color: black;
    	color:#fff;
    	z-index: 10;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="page">
      <header>Header
        <div class="boite">Cube animé</div>
      </header>
      <nav>Navigation</nav>
      <main>Corps de la page </main>
    </div>

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 975
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 975
    Points : 22 011
    Points
    22 011

    Par défaut

    Bonjour Jef,

    • header et nav sont en z-index:1 -> même niveau
    • le cube est DANS header
    • nav est après header

    Bref... C'est compliqué.

    En règle générale, il faut utiliser le moins possible z-index.

    Solution 1 :
    • SUPPRIMER TOUS les z-index
    • mettre z-index: 1; uniquement sur le header


    Solution 2 :
    • SUPPRIMER TOUS les z-index
    • placer nav AVANT header

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="page">
      <nav>Navigation</nav>
      <header>Header
        <div class="boite">Cube animé</div>
      </header>
      <main>Corps de la page </main>
    </div>
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    475
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 475
    Points : 643
    Points
    643

    Par défaut

    Merci Jreaux62,
    La première solution marche, mais pour moi je ne comprends pas trop.
    La solution 2 est plus compliquée, car il faut ensuite jouer avec les order: pour que la <nav> soit positionner en fin pour smartphone et après le <header> pour les tablettes ou desktop.

    Mais ça marche et mon cube peut maintenant se balader sur <header> et<nav>
    Encore merci

  4. #4
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    475
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 475
    Points : 643
    Points
    643

    Par défaut

    En fait non, il y a une autre approche ...
    Mettre <header> en z-inder:2;
    <nav> en z-index:1;
    et pas de z-index pour le cube.

    Résultat avec un cube: https://codepen.io/JefReb/pen/zRwQwp

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

Discussions similaires

  1. Réponses: 6
    Dernier message: 31/03/2006, 18h05
  2. Problèmes de performance - Index
    Par cyril68 dans le forum MS SQL-Server
    Réponses: 3
    Dernier message: 16/03/2006, 15h25
  3. [CSS]Problème de z-index
    Par Pill_S dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 20/02/2006, 21h03
  4. Problème avec les indexes sur une base de données.
    Par osoudee dans le forum MS SQL-Server
    Réponses: 1
    Dernier message: 09/02/2006, 10h24
  5. problème avec z-index sous firefox ???
    Par SpaceFrog dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 22/09/2005, 21h39

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