如何在不影响其尺寸的情况下将粘性元素放置在其他元素之上-解网

问：

我在将浮动粘性元素放置在右侧而其他元素不受影响时遇到了问题。如下图所示，有多个“我是全宽的，我是全宽的，我是全宽的......”元素。前几个由于粘性元件位于右侧而宽度缩小。但是，下面所有元素的宽度不受粘性元素的影响。

我希望所有元素都具有全宽，并且在右侧具有粘性元素。

下面是已解释问题的示例：https://codesandbox.io/s/late-night-d7f4jv?file=/index.html

css position css-float 粘性浮动

<div style="
  width:100%;
  height:200vh;
  background-color:green;
  position:relative
 ">
  <div
    style="
      width:60%;
      height:50vh;
      margin-left:auto;
      background-color:pink;
      position:sticky;
      top:0;
      z-index:2"
  >
    <h1>I'm Sticky!</h1>
  </div>
  <div style="
    position:absolute;
    z-index:1;
    top:0
   ">
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
    <h2>I'm full width I'm full width I'm full width I'm full width I'm full width I'm full width</h2>
  </div>
</div>

我已将您的内容移到单独的内容中，并将位置更改为绝对。这允许内容在不受 DOM 限制的情况下传播。我使用 z-index 来确保粘性元素保留在页面的前面，并从使用浮点值更改为仅应用 .<h2><div>margin-left: auto

不是最优雅的解决方案......

如何在不影响其尺寸的情况下将粘性元素放置在其他元素之上

How to place a sticky element above other elements without impacting their dimensions

评论

评论