Dessinez la vue 3D des codes suivants
html | css |
<section> <div class="A">item 1</div> <div class="B">item 2</div> <div class="C">item 3</div> </section>
| section>div:nth-child(1) { }
section>div:nth-child(2) { position: absolute; }
section>div:nth-child(3) { position:relative; } |
html | css |
<section> <div class="A"> <p>AAAAAA</p> </div> <div class="B"> <p>BBBBBB</p> </div> <div class="C"> <p>CCCCCC</p> </div> </section> | section { position: relative; width: 30vw; }
section>div:nth-child(2) { z-index: 1; position: absolute; }
section>div:nth-child(3) { z-index:2; position:relative; }
div { position: relative; } |
html | css |
<section> <div class="A"> <p>AAAAAA</p> </div> <div class="B"> <p class="alert">BBBBBB</p> </div> <div class="C"> <p>CCCCCC</p> </div> </section>
| p.alert { z-index:1000; position:relative; }
section { position: relative; width: 30vw; }
section>div:nth-child(1) { }
section>div:nth-child(2) { z-index: 1; position: absolute; }
section>div:nth-child(3) { z-index:2; position:relative; background: black; color: white; }
div { position: relative; }
p { margin:0; } |
p.alert {z-index:1000;} n'est pas visible car il est enfant du bloc B (d'index:1) qui se situe derrière le bloc C.
La figure suivante montre p.alert en bleu clair caché par le bloc C
vue 3D de l'ensemble.
