Overlap two centered elements using CSS flexbox

Question

I\'m trying to absolutely center two elements in the middle of the page, with one behind the other. The intent is to have a page that is fully responsive with a circle in the mi

Answer 1

This is easily created with position: absolute, which removes the elements / pseudo elements from the normal flow of the document so they ignore each other. You can use flexible units and don't need to use px. There is no need for the flex properties to achieve this.

• The .sphere element is given its height / width and is centered. The circles conform to this width / height and position.

• Using a pseudo-element for the black circle is the easiest way to have it overlap the white pulsating circle. Both the circles are now siblings and the second sibling will overlap naturally

• The pseudo-element children of .sphere are stretched to fit the parents height and width with the top / left / bottom / right properties set at 0.

• One way to keep this responsive is to use a viewport width unit for the width and height. This will keep the height / width 1:1.

Example

body {
  background: lightblue;
}
.sphere {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  height: 10vw;
  width: 10vw;
}
.sphere:before,
.sphere:after {
  position: absolute;
  content: '';
  border-radius: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.sphere:before {
  background: #FFF;
  animation: pulsate 2.5s ease-out infinite;
}
.sphere:after {
  background: black;
}
@keyframes pulsate {
  0%, 100% {
    opacity: 0;
  }
  0% {
    transform: scale(0.1, 0.1);
  }
  50% {
    opacity: 1.0;
  }
  100% {
    transform: scale(1.5, 1.5);
  }
}