/ Code Css position | Résultat du code Css position | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code de la propriété CSS position.

<style>
.exemple-position { border:1px dotted #666; height:30px; width:310px; }
.exemple-position-static-1{  : static; left: 10px; top : 5px }
.exemple-position-static-2{  : static; right: -10px; bottom : -5px }
.exemple-position-absolute-1{  : absolute; right : 10px; bottom : 5px }
.exemple-position-absolute-2{  : absolute; left : 10px; top : 50% }
.exemple-position-relative-1{  : relative; right : 10px; bottom : 5px }
.exemple-position-relative-2{  : relative; left : 10px; top : 50% }
.exemple-position-fixed{  : fixed; left : 10px; top : 10px }
.exemple-position-sticky{  : sticky; position: -webkit-sticky; top : 40px }

/* Annule le positionnement au survole de la souris */
.exemple-origine:hover .exemple-position{  : static}

.exemple-origine{ position:relative; width:500px; height:150px; margin-top:10px; border:1px solid #666; }
</style>

<div class="exemple-origine">
 <div class="exemple-position exemple-position-static-1">position : static; left: 10px; top : 5px</div>
 <div class="exemple-position exemple-position-static-2">position : static; right: -10px; bottom : -5px</div>
</div>
<div class="exemple-origine">
 <div class="exemple-position exemple-position-relative-1">position : relative; right : 10px; bottom : 5px </div>
 <div class="exemple-position exemple-position-relative-2">position : relative; left : 10px; top : 50%</div>
</div>
<div class="exemple-origine">
 <div class="exemple-position exemple-position-absolute-1">position : absolute; right : 10px; bottom : 5px </div>
 <div class="exemple-position exemple-position-absolute-2">position : absolute; left : 10px; top : 50%</div>
</div>
<div class="exemple-origine">
 <div class="exemple-position exemple-position-fixed">position : fixed; left: 10px; top : 10px</div>
</div>
<div class="exemple-origine">
 <div class="exemple-position exemple-position-sticky">position : sticky; left: 10px; top : 40px</div>
</div>

Interprétation du code de la propriété position CSS par votre navigateur.

position : static; left: 10px; top : 5px
position : static; right: -10px; bottom : -5px
position : relative; right : 10px; bottom : 5px
position : relative; left : 10px; top : 50%
position : absolute; right : 10px; bottom : 5px
position : absolute; left : 10px; top : 50%
position : fixed; left: 10px; top : 10px
position : sticky; left: 10px; top : 40px

Interprétation normale du code de la propriété CSS position (copie d'écran).

copie d'écran de l'affichage de la propriété CSS position