使用 z-index 和 translate3d 进行分层

Question

如何强制浏览器在 <header> 上方呈现 <div class="child-above">。在我的样式中，translate3d 和 z-index 属性之间存在冲突。

理论上，从 .wrapper-scroll 中删除 translate3d 就足够了，但我不能，因为它是由我在我的网站上使用的 Smooth Scrollbar 设置的属性。

我尝试了 here 提出的解决方案，但要么我做错了什么，要么根本不起作用。

如何将 .child-above 放在 header 上方而不删除 translate3d 属性并将 .child-above 保留在 .wrapper-scroll 中？

header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #000;
  color: #fff;
  z-index: 100;
}

#wrapper{
  position: relative;
}

.wrapper-scroll{
  transform: translate3d(0,0,0);
}

.child-above{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 200px;
  height: 200px;
  background: #555;
  z-index: 9999;
  padding: 16px 10px;
  color: red;
}

<header>HEADER</header>
<div id="wrapper">
  <div class="wrapper-scroll">
    <div class="child-above">CHILD TO BE ABOVE HEADER</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis recusandae, tenetur assumenda sequi quos voluptates voluptatum voluptas. Officia quisquam eveniet totam reprehenderit vel neque est dolorem assumenda in voluptatem. Ab accusantium provident, ut, obcaecati sapiente vitae officia. Distinctio assumenda ex deserunt iusto tempore optio, mollitia amet quas! Aut, magni, repellendus.</p>
  </div>
</div>

Answer 1

这与转换无关 - 只需将大于 header 的 z-index 添加到 #wrapper

但我觉得我从你的问题中遗漏了一些东西...

header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: #000;
  color: #fff;
  z-index: 100;
}

#wrapper{
  position: relative;
  z-index:101;
}

.wrapper-scroll{
  transform: translate3d(0,0,0);
  position: relative;
  z-index: 101;
}

.child-above{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 200px;
  height: 200px;
  background: #555;
  z-index: 9999;
  padding: 16px 10px;
  color: red;
}

<header>HEADER</header>
<div id="wrapper">
  <div class="wrapper-scroll">
    <div class="child-above">CHILD TO BE ABOVE HEADER</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis recusandae, tenetur assumenda sequi quos voluptates voluptatum voluptas. Officia quisquam eveniet totam reprehenderit vel neque est dolorem assumenda in voluptatem. Ab accusantium provident, ut, obcaecati sapiente vitae officia. Distinctio assumenda ex deserunt iusto tempore optio, mollitia amet quas! Aut, magni, repellendus.</p>
  </div>
</div>

使用 z-index 和 translate3d 进行分层

Layering using z-index with translate3d

html

css

z-index

css-transforms

translate3d