Relative positioning

by jorgeherrera

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/es/docs/Web/CSS/position -->

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

CSS

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
#three{
  position: absolute;
  top: 0px;
  left: 400px;
  background-color: pink;
}
#four{
  position: fixed;
  top: 100px;
  left: 100px;
  background-color: green;
}