CSS/HTML: div 的位置在低于 "absolute" div 时不会保持粘性

Question

我试图让一个 div 保持在左上角，而另一个更大的主 div 居中且绝对。问题是我无法让 div 真正保持保持粘性，而主要 div 是绝对的。

如果我将粘性 div 放在中心 div 上方并将中心 div 设置为正常，但随后中心 div 被向下推，它会起作用，我试图通过将其设置为绝对来避免这种情况。

html:

<div id="main">
(stuff here)
</div>
<div id="options">
  This should be sticky
</div>

css:

body
{
 background-color:gray;
}

div
{
  background-color:white;
}

#main
{
    position: absolute;
    background-color: #FFF;
    color: black;
    width: 50%;
 margin-left: 20%;
}

#options
{
    position: sticky;
    top: 0;
    width: 15%;
}

这是我能想到的所有信息，但如果我需要添加更多信息，请告诉我。

Answer 1

body {
  background-color: gray;
}

div {
  background-color: #fff;
}

#main {
  max-width: 50%;
  margin: auto;
  padding: 1em;
}

#options {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
  padding: 1em;
  max-width: 5em;
}

<div id="options">
  This should be sticky
</div>
<div id="main">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut consectetur ligula. Fusce lobortis tortor non rhoncus faucibus. Donec cursus ornare luctus. Mauris mollis magna non malesuada ultricies. Interdum et malesuada fames ac ante ipsum primis
  in faucibus. Maecenas ut sem ut velit convallis volutpat nec at orci. Phasellus nec ante metus. Donec finibus ex ipsum, et molestie turpis egestas quis. Donec ac erat id nisl vulputate aliquam. Morbi luctus faucibus posuere. Nam consectetur facilisis
  posuere. Aliquam ut porta odio, a dapibus dui. Cras accumsan purus ipsum, ac tincidunt tellus dapibus et. Aliquam gravida nulla lectus, in tempor ex finibus quis. Donec non eleifend ipsum. Nunc aliquam id metus vel egestas. Aenean in sodales lacus.
  Duis eget augue lectus. Nam venenatis enim ut velit imperdiet auctor. Quisque malesuada rutrum elementum. Integer in tortor ac arcu tempor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel urna felis. Lorem ipsum dolor
  sit amet, consectetur adipiscing elit. Vestibulum ut consectetur ligula. Fusce lobortis tortor non rhoncus faucibus. Donec cursus ornare luctus. Mauris mollis magna non malesuada ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  Maecenas ut sem ut velit convallis volutpat nec at orci. Phasellus nec ante metus. Donec finibus ex ipsum, et molestie turpis egestas quis. Donec ac erat id nisl vulputate aliquam. Morbi luctus faucibus posuere. Nam consectetur facilisis posuere. Aliquam
  ut porta odio, a dapibus dui. Cras accumsan purus ipsum, ac tincidunt tellus dapibus et. Aliquam gravida nulla lectus, in tempor ex finibus quis. Donec non eleifend ipsum. Nunc aliquam id metus vel egestas. Aenean in sodales lacus. Duis eget augue lectus.
  Nam venenatis enim ut velit imperdiet auctor. Quisque malesuada rutrum elementum. Integer in tortor ac arcu tempor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel urna felis.
</div>

Answer 2

问题是，通过将元素设置为 position:absolute，您可以将其从流中删除，并使 body 的高度成为粘性元素之一，因此您将

这是另一个不使用 absolute 的想法，您可以依靠 flexbox 来创建布局：

body {
  background-color: gray;
  display: flex;
  align-items: flex-start;
}

div {
  background-color: white;
}

#main {
  background-color: #FFF;
  color: black;
  width: 50%;
  margin-left: 10%; /*(100% - 50%)/2 - 15%*/
}

#options {
  position: sticky;
  top: 0;
  width: 15%;
  order: -1;
}

<div id="main">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut consectetur ligula. Fusce lobortis tortor non rhoncus faucibus. Donec cursus ornare luctus. Mauris mollis magna non malesuada ultricies. Interdum et malesuada fames ac ante ipsum primis
  in faucibus. Maecenas ut sem ut velit convallis volutpat nec at orci. Phasellus nec ante metus. Donec finibus ex ipsum, et molestie turpis egestas quis. Donec ac erat id nisl vulputate aliquam. Morbi luctus faucibus posuere. Nam consectetur facilisis
  posuere. Aliquam ut porta odio, a dapibus dui. Cras accumsan purus ipsum, ac tincidunt tellus dapibus et. Aliquam gravida nulla lectus, in tempor ex finibus quis. Donec non eleifend ipsum. Nunc aliquam id metus vel egestas. Aenean in sodales lacus.
  Duis eget augue lectus. Nam venenatis enim ut velit imperdiet auctor. Quisque malesuada rutrum elementum. Integer in tortor ac arcu tempor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel urna felis. Lorem ipsum dolor
  sit amet, consectetur adipiscing elit. Vestibulum ut consectetur ligula. Fusce lobortis tortor non rhoncus faucibus. Donec cursus ornare luctus. Mauris mollis magna non malesuada ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  Maecenas ut sem ut velit convallis volutpat nec at orci. Phasellus nec ante metus. Donec finibus ex ipsum, et molestie turpis egestas quis. Donec ac erat id nisl vulputate aliquam. Morbi luctus faucibus posuere. Nam consectetur facilisis posuere. Aliquam
  ut porta odio, a dapibus dui. Cras accumsan purus ipsum, ac tincidunt tellus dapibus et. Aliquam gravida nulla lectus, in tempor ex finibus quis. Donec non eleifend ipsum. Nunc aliquam id metus vel egestas. Aenean in sodales lacus. Duis eget augue lectus.
  Nam venenatis enim ut velit imperdiet auctor. Quisque malesuada rutrum elementum. Integer in tortor ac arcu tempor faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel urna felis.
</div>
<div id="options">
  This should be sticky
</div>

Answer 3

我可以用你的代码想到两种方法：

首先：#options 设置 position:fixed
第二：将您的#main position:absolute 更改为 relative 和 place 你的#options div 高于#main

CSS/HTML: div 的位置在低于 "absolute" div 时不会保持粘性

CSS/HTML: div's position doesn't stay sticky when below an "absolute" div

html

css

css-position

sticky

absolute

html:

css: