Search code examples
htmlcsscss-positionstickyabsolute

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

I'm trying to have one div stay stickied in the top left, while another bigger main div is centered and absolute. The problem is I can't get stickied div to actually stay sticky while the main div is absolute.

It works if I put the sticky div above the center div and set the center div to normal, however then the center div is pushed downwards, which I'm trying to avoid by setting it to absolute.

Fiddle: 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%;
}

This is all the information I can think of to give, but let me know if I need to add any more.

Solution

  • The issue is that by setting the element to be position:absolute you remove it from the flow and you make the height of the body to be the one of the stikcy element thus you will not have any sticky behavior

    Here is another idea without the use of absolute where you can rely on flexbox to create your layout:

    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>