html – How to put flex children on each other.

I want to place both boxes (and overlapping) in the middle of the screen without using a fixed width and height.

Finally I want to use CSS transitions to make Box 1 disappear and show Box 2 instead (after clicking the button).

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="container w-100 bg-dark" style="height: 400px;">
  <div class="d-flex justify-content-center align-items-center bg-light h-100">
    <div class="bg-white px-4 py-4 rounded shadow" style="z-index: 1">
      <p>
        Box 1
      </p>
    </div>
    <div class="bg-white px-4 py-4 rounded shadow" style="z-index: 2">
      <p>
        Box 2: More Content <br>
        Lorem Ipsum
      </p>
    </div>
  </div>
</div>

Write a Comment