What makes my appear on top of in the following CSS code?

Question

I'm following a nice tutorial to build a sidenav in pure css code. I managed to figure out the most important parts that:

1. attach both the <main> and <aside> to the same grid cell, which spreads over the entire viewport.
2. set different translations according to if the sidenav is the target.

Based on my understanding, I've built a minimum working example below. However, I cannot understand why the sidenav, when activated, appears on top of the <main> element, without any z-index configuration.

Any ideas?

body {
  display: grid;
  grid: [stack] 1fr / min-content [stack] 1fr;
  margin: 0;
  padding: 0;
}

body>aside,
body>main {
  grid-area: stack;
}

#sidenav-open {
  display: flex
  position: sticky;
  top: 0;
  height: 100vh;
  visibility: hidden;
  transform: translateX(-110vw);
  transition: transform 0.6s ease-out, visibility 0s linear 0.6s;
}

#sidenav-open>nav {
  flex: 2;
  display: inline-flex;
  flex-direction: column;
  background-color: rgb(48, 48, 48);
  font-size: 1.5rem;
}

#sidenav-open>a {
  flex: 1;
}

#sidenav-open:target {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.6s ease-out;
}

.hamburger {
  display: flex;
  padding: 1rem;
  margin-inline-start: -1rem;
  block-size: 4rem;
}

.hamburger>svg>line {
  stroke: rgb(226, 226, 226);
  stroke-width: 7px;
}

a {
  color: hsl(328, 100%, 74%);
}

<main>
  <header>
    <a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
      <svg viewBox="0 0 50 40" role="presentation" focusable="false" aria-label="trigram for heaven symbol">
      <line x1="0" x2="100%" y1="10%" y2="10%" />
      <line x1="0" x2="100%" y1="50%" y2="50%" />
      <line x1="0" x2="100%" y1="90%" y2="90%" />
    </svg>
    </a>
    <h1>Site Title</h1>
  </header>

  <article>
    <h2>Totam Header</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum consectetur, necessitatibus velit officia ut impedit veritatis temporibus soluta? Totam odit cupiditate facilis nisi sunt hic necessitatibus voluptatem nihil doloribus! Enim.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>

    <h3>Subhead Totam Odit</h3>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
  </article>
</main>

<aside id="sidenav-open">
  <nav>
    <a href="#">Dashboard</a>
    <a href="#">Profile</a>
    <a href="#">Preferences</a>
    <a href="#">Archive</a>
  </nav>

  <a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" "></a>
  </aside>

Answer 1

My answer is in reference to the article given here. It mentions at least four reasons why your z-index isn't working as expected and also to note that you don't specifically need to set z-index to make elements appear on top of one another.

And to answer your question, it looks like setting some CSS properties like opacity or transform puts an element in a new stacking context meaning if let's say the z-index of the element was 0 before, now it has become 1(in the sense how it behaves). Now you obviously have used transform property, so it makes sense that the sidenav appears on top of your main content whether you put it after or before your main content.

Removing position: sticky won't make a difference since you are still using transform property.

I have tried to come up with a code solution but there is no way to demonstrate the case with the editor without using transform and position:sticky property first to make sure the sidenav appears on top of the main content. So the best way is to try yourself with the help of developer tools. Will give you two case scenario to verify the statements:

Case 1: Place the sidenav after the main content.
Open DevTools for your page. Activate your sidenav. Now in the styles section, uncheck transform property for #sidenav-open:target and uncheck transform and position:sticky property for #sidenav-open. The sidenav will still appear on top of the main content since it appears after the main content in the DOM.

Case 2: Place the sidenav before the main content. Open DevTools for your page. Activate your sidenav. Now in the styles section, uncheck transform property for #sidenav-open:target and uncheck transform and position:sticky property for #sidenav-open. Now your main content will appear on top of the sidenav as expected due to the natural stacking order. You can again try to check the transform property for #sidenav-open:target or position-sticky for #sidenav-open and you will see the sidenav appear on top of the main content.

I tried it myself personally with the given code and it surely is the case. That's it for the answer!