A1 container zindex debug

A1 container zindex debug

by Csaba Hellinger

HTML

<nav>Nav</nav>
<div class="page">
  <div class="containers">
    <div class="hero">Hero</div>
    <div class="shelf">Shelf 1</div>
    <div class="shelf">Shelf 2</div>
    <div class="shelf">Shelf 3</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS

</div>

nav, .page, .containers, .hero, .shelf { 
  display: block;
}

nav, .hero, .shelf {
  padding: 1rem;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: skyblue;
}

.page {
  margin-top: 3rem;
}

.containers {
  display: flex;
  flex-direction: column;
}

.hero {
  background: rosybrown;
  height: 8rem;
}

.shelf {
  z-index: 10;
  background: pink;
  margin: 0 1rem 1rem 1rem;
}

.shelf:nth-child(2) {
  margin-top: -5rem;
}

.footer {
  margin-top: 100%;
}