html：

Question

我试图让一个div停留在左上方，而另一个更大的main 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

问题在于，通过将元素设置为position:absolute，可以将其从流中删除，并将身体的高度设置为时髦元素之一，因此您将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
第二：将您的#main position:absolute更改为相对位置您的#option 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>

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

html：

css：

3 个答案: