如何将粘性元素放置在其他元素上方而不影响其尺寸

Question

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

我希望所有元素都具有完整宽度，并且粘性元素位于右侧。

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

Answer 1

我有一个解决方案给你，但这不是最好的......

https://codesandbox.io/s/vibrant-rosalind-vx9pdh

我已将您的

<h2>

内容移至单独的

<div>

并将位置更改为绝对位置。这使得内容的传播不受 DOM 的限制。我使用 z-index 来确保粘性元素保留在页面的前面，并从使用浮点值更改为仅应用

margin-left: auto

。

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