CSS / HTML：当在“绝对”div之下时，div的位置不会保持粘性

Question

我试图让一个div留在左上角，而另一个更大的主要div是居中和绝对的。问题是我不能得到粘性div实际上保持粘性而主要的div是绝对的。

如果我将粘性div放在中心div上方并将中心div设置为正常，然后将中心div向下推，这是有效的，我试图通过将其设置为绝对来避免。

小提琴：http://jsfiddle.net/fqz6gej9/2/

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

问题是，通过将元素设置为position:absolute，你将它从流中移除，你将身体的高度作为stikcy元素之一，因此你将not have any sticky behavior

这是另一个不使用绝对的想法，你可以依靠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 2

我可以用你的代码思考两种方式：

• 第一：为#options设置position:fixed
• SECOND：将您的#main position:absolute更改为亲戚，并将您的#options div置于#main之上

Answer 3

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>