是什么使我的lt;出现在Main＆gt;在以下CSS代码中？

Question

我正在关注一个不错的教程以构建纯CSS代码的Sidenav。我设法弄清了最重要的部分：

1. 将＆lt; main＆gt; and ＆lt;旁边＆gt;都附加到相同的网格单元格上，并在整个视图中传播。
2. 根据Sidenav是目标，设置不同的翻译。

根据我的理解，我在下面建立了一个最低限度的工作示例。但是，我不明白为什么sidenav激活后出现在＆lt; main＆gt;元素的顶部，而没有任何z-index配置。

有什么想法吗？

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

我的答案是指在这里。它提到了至少四个原因为什么您的z索引无法正常工作，还要注意，您不需要专门设置z索引才能使元素出现
彼此之间。

为了回答您的问题，看起来像设置某些CSS属性（例如不透明度或变换）将元素放在新的堆叠上下文中，这意味着如果说该元素的Z index在0之前为0，现在已成为1（从某种意义上说，它的行为）。现在，您显然已经使用了Transform属性，因此无论您将其放在主要内容之后还是之前，Sidenav都会出现在主要内容的顶部。

删除位置：粘性不会有所作为，因为您仍在使用变换属性。

我试图提出一个代码解决方案，但是没有办法在不使用变换和位置的情况下与编辑器一起演示案例：粘性首先要确保Sidenav出现在主要内容的顶部。因此，最好的方法是在开发人员工具的帮助下尝试自己。将为您提供两种情况以验证陈述：

案例1：将Sidenav放在主要内容之后。
为您的页面打开DevTools。激活您的侧纳夫。现在在“样式”部分中，取消选中 transform ＃sidenav-open的属性：target和uncheck transform and 位置：scipy ＃sidenav-open的属性。 Sidenav仍将出现在主要内容的顶部，因为它在DOM中的主要内容之后出现。

案例2：将Sidenav放在主要内容之前。
为您的页面打开DevTools。激活您的侧纳夫。现在在“样式”部分中，取消选中 transform ＃sidenav-open的属性：target和uncheck transform and 位置：scipy ＃sidenav-open的属性。现在，由于自然堆叠顺序，您的主要内容将按预期出现在Sidenav的顶部。您可以再次尝试检查＃sidenav-open的变换属性：target或 position-sticky-sticky ＃sidenav-open，您会看到sidenav出现在顶部主要内容。

我自己亲自使用给定代码尝试过，肯定是这种情况。就是这样！