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>
Partager