<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere, officiis. Eius quod iure dolorum sunt corporis hic, tempora, tenetur omnis deleniti laudantium maxime necessitatibus corrupti magnam reiciendis quisquam error sit?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere, officiis. Eius quod iure dolorum sunt corporis hic, tempora, tenetur omnis deleniti laudantium maxime necessitatibus corrupti magnam reiciendis quisquam error sit?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere, officiis. Eius quod iure dolorum sunt corporis hic, tempora, tenetur omnis deleniti laudantium maxime necessitatibus corrupti magnam reiciendis quisquam error sit?</p>
<div class="static">static</div>
<div class="relative">relative
  <div class="absolute-1">absolute-1</div>
</div>
<div class="absolute-2">absolute-2</div>
<div class="fixed">fixed</div>
<div class="sticky">sticky</div>

body {
  height: 2000px;
  
}

div{
  width: 100px;
  height: 100px;
  background-color: orange;
  border: 1px solid black;
  float: left;
}

.relative {
  position: relative;
  top: 10px;
  margin-left: 5px;
}

.absolute-1{
  position: absolute;
  left: 0px;
  top: 30px;
}

.absolute-2 {
  position: absolute;
  top: 60px;
  left: 220px;
}

.fixed {
  position: fixed;
  top: 50%;
  left: 350px;
}

.sticky {
  position: sticky;
  top: 0px;
  left: 500px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.