have fun

 

See the Pen empty by dupont (@dupontcodepen) on CodePen.

learn layout

 https://web.dev/learn/css/layout/

News !

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

4 lines of CSS for a vertical responsive slideshow

 

Vidéo

 https://sites.google.com/view/duponthtml/accueil

the 3D View tool : Microsoft

 référence

box sizing

 

See the Pen box sizing by dupont (@dupontcodepen) on CodePen.

Exemple inspecter !

 https://getbootstrap.com/docs/5.0/examples/blog/#

Opacité et contexte d'empilement ++

Dessinez le résultat

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 {   background: blue;   z-index: 1000;   position: relative; } section {   position: relative; } section > div:nth-child(1) {   width: 10vw;   height: 40vh;   background-color: brown; } section > div:nth-child(2) {   position: absolute;   width: 20vw;   height: 20vh;   background: red;   opacity: 0.9; } section > div:nth-child(3) {   width: 50vw;   height: 50vh;   z-index: 2;   text-align: right;   position: relative;   background: greenyellow; } div {   position: relative; } p {   margin: 0; }

 

Z-index de P = 1.1000

Que devient le code sans opacity !

Z-index de p : 1000

L'opacité (comme position relative) crée un contexte d'empilement.

Sélecteur en action !

See the Pen test selecteur by dupont (@dupontcodepen) on CodePen.

Layer : chrome

 Chrome permet d'inspecter le layer et de voir son profil.

Il faut dans un premier temps aller dans 

More tools-> Layers de votre inspecteur.

Voici les "tapes à suivre pour animer la construction des dessins.

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index