在后面隐藏一个 div

Question

我试着做一个简单的思考，但我被困住了。 我有一个固定位置的 div “滚动”。当我滚动页面时，我希望 div “滚动”在下面的所有其他 div 后面。

我放了一个例子：exemple jsfiddle

.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
}

感谢您的帮助

Answer 1

要回答您的问题，您需要了解 z-index 等概念和/或堆叠顺序的工作原理。有很多很棒的文章可以解释 z-index，但我特别喜欢的一篇是 What no one told you about z-index。

上面引用文章的一个sn-p：

当您将位置属性引入混合时，任何定位元素（及其子元素）都会显示在任何非定位元素的前面。 （说一个元素是“定位的”意味着它具有除静态之外的位置值，例如相对、绝对等）

有趣的是，有一个 CSS3 属性可以做类似的事情。您可以使用transform 解决您的问题，而无需显式应用 z-index。

例如，如果我们将transform: translateX(0) 应用于您的 JSFiddle，您会看到灰色 div 现在位于您的文本上方。这是一个更新的小提琴：

https://jsfiddle.net/gh94Lbad/

<div style="width:auto; height:50px; background-color:grey; transform: translateX(0)"></div>
<div style="width:auto; height:350px; background-color:grey;transform: translateX(0)">I want to be in displayed in front</div>

规范中解释了transform 起作用的原因（通过修改堆叠上下文）：

对于布局由 CSS 盒子模型控制的元素，transform 属性的任何值都不是 none 会导致创建堆叠上下文。实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层，如果它是具有 z-index: 0 的定位元素。如果定位具有变换的元素，则 z-index 属性应用如 [CSS2] 中所述，除了 auto 被视为 0，因为总是创建一个新的堆叠上下文。

编辑：作为pointed out by @TemaniAfif，最好通过解释元素的paint order 来解释其工作原理：

为此，您需要考虑绘制顺序 (w3.org/TR/css-position-3/#painting-order)，您会发现转换后的元素稍后绘制，因此它们在上方。 （在步骤（8）中）

Answer 2

您需要对想要被看到的元素使用更多的 z-index，而对“后面”的元素使用更少的 z-index。

Answer 3

可以使用z-index。但要使 z-index 起作用，它必须是 position: absolute、position:fixed 或 position:relative。

.top{
  width:auto;
  background-attachment: fixed; 
  height:300px;  
    background-image: linear-gradient(pink, green);
}
.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
  z-index:4;
}

<div class="top">
  <div>
    Hello
  </div>
  <div>
    Hello
  </div>
</div>
<div class="scrolling">
  SCROLL
  <br>
  I want to stay behind the div grey
</div>

<div style="width:auto; height:50px; background-color:grey;position:relative;z-index:5">

</div>
  
<div style="width:auto; height:350px; background-color:grey;position:relative;z-index:5">
  I want to be in displayed in front
</div>

Answer 4

很确定 a (z index) 是您要在此处使用的。

我在下面更新了你的小提琴。 Z 索引允许您从前到后定位。

<div class="top">
  <div>
    Hello
  </div>
  <div>
    Hello
  </div>
</div>
<div class="scrolling">
  SCROLL
  <br>
  I want to stay behind the div grey
</div>


<div class="front" style="width:auto; height:350px; background-color:grey;">
  I want to be in displayed in front
</div>

.top{
  width:auto;
  background-attachment: fixed; 
  height:300px;  
  background-image: linear-gradient(pink, green);
  z-index: 0;
}
.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
  z-index: 0;
}
.front{
  z-index: 1;
  position: relative;
}