Démo CSS Position absolute

by Arnaud

HTML

<div class="parent parent1" >parent 1
<div class="parent parent2" style="position:relative">Parent 2
<div class="parent parent3" >Parent 3


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


</div>
</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
}
.parent{
  border:1px solid black;
  margin:20px;
  float:left;
  min-height:65px;
  min-width:65px;
}
.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;
}