Question

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

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

我尝试了here提出的解决方案，但要么我做错了，要么就是行不通。

如何将.child-above放在标题上方而不删除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

这与变换无关 - 只需将大于标题的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进行分层

1 个答案: