【问题标题】:Hide a div behind在后面隐藏一个 div
【发布时间】:2019-05-07 12:38:07
【问题描述】:

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

我放了一个例子:exemple jsfiddle

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

感谢您的帮助

【问题讨论】:

    标签: html css fixed behind


    【解决方案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)中)

    【讨论】:

    • 引用不是解释转换行为的正确引用...您解释说转换创建了一个堆叠上下文,这并不意味着它应该在另一个元素之上。为此,您需要考虑绘制顺序 (w3.org/TR/css-position-3/#painting-order),您会发现转换后的元素稍后绘制,因此它们在上方。 (在步骤(8)中)
    • 可能使用 not correct 是不正确的,但我会说它不准确,因为它没有说明它应该在其他元素之后绘制跨度>
    • 这是一个很好的观点 :) 我倾向于将堆叠上下文/绘制顺序视为一个,因为它们密切相关。但是为什么 transform 会影响渲染的技术解释是通过绘制顺序和您提供的链接来解决的。
    【解决方案2】:

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

    【讨论】:

      【解决方案3】:

      可以使用z-index。但要使 z-index 起作用,它必须是 position: absoluteposition:fixedposition: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>

      【讨论】:

        【解决方案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;
        }
        

        【讨论】:

        • 这会将元素置于 everything 之后,因此永远不可见。如果您查看 OP 提供的 JSFiddle,您会发现该元素应该是可见的,直到被灰色元素滚动。
        • 在我发布之后,我实际上进入了小提琴并提供了正确的代码。你是对的。
        猜你喜欢
        • 2014-01-04
        • 2021-06-11
        • 1970-01-01
        • 1970-01-01
        • 2016-03-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-09-08
        相关资源
        最近更新 更多