body {
  margin: 0;
  border: 5px solid black;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
}

.one {
  width: 400px;
  height: 400px;
  background-color: red;
}

.two {
  width: 300px;
  height: 300px;
  background-color: yellow;
}

.three {
  width: 200px;
  height: 200px;
  background-color: green;
}

.four {
  width: 100px;
  height: 100px;
  background-color: blue;
}

/* Excerise 1 */
/* .two, .three, .four {
  position: absolute;
  top: 50px;
  left: 50px;
} */
 
/* Excerise 2 */
/* .four {
  position: absolute;
  right: 0;
} */

/* Excerise 3 */
/* .three{
  position: relative;
  top: 200px;
  left: 400px;
}
.four {
  position: relative;
  top: 100px;
} */

/* Exercise 4 */
/* .two {
  position: relative;
  top: 100px;
  left: 100px;
}
.three {
  position: absolute;
  top: -100px;
  left: -100px;
}
.four {
  position: absolute;
  bottom: 0;
  right: 0;
} */

/* Exercise 5 */
/* .two {
  position: absolute;
  bottom: 0;
  right: 0;
}
.three {
  position: absolute;
  bottom: 300px;
}
.four {
  position: fixed;
  top: 5px;
  left: 5px;
} */