bootstrap: z-index

by istiq20

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Z-Index</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div
      class="z-3 border border-primary bg-primary-subtle position-absolute"
      style="top: 0px; left: 0px; width: 200px; height: 200px"
    ></div>
    <div
      class="z-2 border border-primary bg-primary-subtle position-absolute"
      style="top: 20px; left: 20px; width: 200px; height: 200px"
    ></div>
    <div
      class="z-1 border border-primary bg-primary-subtle position-absolute"
      style="top: 40px; left: 40px; width: 200px; height: 200px"
    ></div>
    <div
      class="z-0 border border-primary bg-primary-subtle position-absolute"
      style="top: 60px; left: 60px; width: 200px; height: 200px"
    ></div>
    <div
      class="z-n1 border border-primary bg-primary-subtle position-absolute"
      style="top: 80px; left: 80px; width: 200px; height: 200px"
    ></div>

    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
  </body>
</html>