1

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

我放了一个例子：example jsfiddle

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

谢谢您的帮助

4

4 回答 4

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>

于 2018-12-05T21:18:40.187 回答
0

很确定 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;
}
于 2018-12-05T21:16:58.203 回答
0

You need to use more z-index to element that you want to be seen and use less z-index to element "behind".

于 2018-12-05T21:31:39.843 回答
0

要回答您的问题，您需要了解堆叠顺序等概念z-index和/或堆叠顺序的工作原理。有很多很棒的文章可以解释 z-index，但我特别喜欢的一篇是没有人告诉你关于 z-index 的内容。

上面引用文章的片段：

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

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

例如，如果我们应用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，因为总是创建新的堆叠上下文。

编辑：正如@TemaniAfif 所指出的，最好通过解释paint order你的元素来解释它是如何工作的：

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

于 2018-12-05T21:24:43.520 回答