<div class="grid">
Body
  <div class="demo-1">
    Static
  </div>
  <div class="demo-2">
    Relative
  </div>
   <div class="demo-3">
     <p>
       Aboslute with parent is relative.
       <br/> Absolute base on div.demo-3
     </p>
  </div>
   <div class="demo-4">
     <p>
       Absolute with parent isnt relative. 
       <br/> Absolute base on HTML page
     </p>
  </div>
</div>
  
.grid {
  display:flex;
  height:300px;
  border:1px solid #000;
}
.demo-1,.demo-2, .demo-3,.demo-4 {
  height:300px;
  width:300px;
  background:#ccc;
  border:1px solid #333;
  box-sizing:border-box;
  margin:4px;
}
.demo-1 {
  position:static;
  top: 20px
}
.demo-2 {
  position:relative;
  top:20px;
}
.demo-3 {
  position:relative;
}
.demo-3 p {
  position:absolute;
  left:0;
  top:50%
}
.demo-4 p {
  position:absolute;
  left:0;
  top:50%
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.