body {
  font-family: courier;
}
.parent {
  position: absolute;
  background-color: #af47ff;
  padding: 30px;
  width: 300px;
  top: 100px;
  left: 100px;
  z-index: 5;
  text-align: right;
}

.child {
  background-color: #ff4797;
  padding: 30px;
  left: 80px;
}

.box {
  background-color: #f3ff47;
  padding: 30px;
  border: 2px dotted #333;
  font-size: 2rem;
  top: 30px;
  left: 130px;
  position: static;
  z-index: 5;
 }

.square {
  padding: 30px;
  background-color: teal;
  border: 1px solid #000;
  z-index: 12;
  position: absolute;
}

.circle {
  position: absolute;
  background-color: magenta;
  height: 80px;
  width: 80px;
  border-radius:50%;
  text-align: center;
  left: 110px;
  top: 80px;
  z-index: 10;
}

.circle p{
  top: 17px;
}