.wrapper {
  width: 1000px;
  height: 400px;
  margin:50px auto;
  background:beige;
  position:relative;
}
.wrapper div {
  width: 50px;
  height: 50px;

}
.wrapper div:nth-of-type(1) {
  background:crimson;
  position:absolute;
  /* top:10px;
  left:10px;
  bottom:10px;
  right:10px; */
  /* top:50%;
  left:50%; */
  /* margin-top:-25px;
  margin-left:-25px; */
  /* transform:translate(-50%, -50%); */
}

/* position: static | relative | absolute | fixed | sticky
si changement de position par défaut, alors on débloque les propriétés suivantes : 

z-index: valeurs chiffrées
top
left
right
bottom */






















.wrapper div:nth-of-type(2) {
  background:yellowgreen;
}
.wrapper div:nth-of-type(3) {
  background:yellow;
}
.wrapper div:nth-of-type(4) {
  background:skyblue;
}
.wrapper div:nth-of-type(5) {
  background:purple;
}
.wrapper div:nth-of-type(6) {
  background:tomato;
}
.wrapper div:nth-of-type(7) {
  background:salmon;
}
.wrapper div:nth-of-type(8) {
  background:slateblue;
}
.wrapper div:nth-of-type(9) {
  background:steelblue;
}
.wrapper div:nth-of-type(10) {
  background:rebeccapurple;
}