Démo CSS Position

by Arnaud

HTML

<div class="boiteParent" style="margin:40px 0 0 ;position: -webkit-sticky;position: sticky;top: 00px; left:400px;">
<p>
position: sticky;
top: 20px;</p>
            <div class="boite"></div>
            <div class="boite boite-exemple">sticky</div>
            <div class="boite"></div>
</div>
<div class="boiteParent">
<p>
position: fixed;
</p>
            <div class="boite"></div>
            <div class="boite boite-exemple"style="position: fixed;">fixed</div>
            <div class="boite"></div>
</div>
<div class="boiteParent">
<p>
position: static;
</p>
            <div class="boite"></div>
            <div class="boite boite-exemple" style="position: static;">static</div>
            <div class="boite"></div>
</div>


 <div class="boiteParent">
<p>
position: relative;
top: 40px; left: 40px;</p>
            <div class="boite"></div>
            <div class="boite boite-exemple"style="position: relative;top: 40px; left: 40px;">relative</div>
            <div class="boite"></div>
</div>
       
<div class="boiteParent">
<p>
position: absolute;
top: 0px; left: 0px;</p>
            <div class="boite"></div>
            <div class="boite boite-exemple"style="position: absolute;top: 0px; left: 0px;">absolute</div>
            <div class="boite"></div>
</div>

CSS

body{
  position:relative;
}
.output section {
 align-items:flex-start;
 overflow:auto
}
.boite {
 background-color:rgba(0,0,255,.2);
 border:3px solid #00f;
 float:left;
 width:65px;
 height:65px
}

.clear {
 clear:both;
 padding-top:1em
}

.boite-exemple {
 background-color:#ff0;
 border:3px solid red;
 z-index:1;
}
.boiteParent{
   border:1px solid red;
position:relative;
clear:both;
margin:0 40px 40px;
overflow:hidden;
width:300px;
}