CSS position: sticky; bottom: 0 not sticking to bottom

Question

I can't get #up-arrow to stick to the bottom of .container.

.container {
  height: 100vh;
  width: 100vh;
  background-color: yellow;
}
#up-arrow {
    width: 45px;
    height: 45px;
    border: 2px solid #23ADF8;
    border-radius: 23.5px;
    background-color: #23ADF8;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}
#up-arrow:hover {
    background-color: white;
}
#up-arrow:hover img {
    filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}

<div class="container">     
  <div id="up-arrow">
    <a href="#top">
      <img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
    </a>
  </div>
</div>

Here is the similar question and pretty detailed answer as well. https://stackoverflow.com/questions/54609208/why-bottom0-doesnt-work-with-positionsticky — Wahab Shah, Mar 30 '22 at 06:29
Try with position absolute in #up-arrow with relative in parent. Or one suggestion try position fixed, if you are making this button for scroll to top in your website. — VIKESIR, Mar 30 '22 at 06:38

score 1 · Accepted Answer · answered Mar 30 '22 at 06:22

The element #up-arrow will not stick to the bottom of the container with the current layout.

Because, sticky element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).

Here the element #up-arrow is at the top of the container, hence the element will not be able to stick to bottom on scroll.

Add some content on top of #up-arrow to see sticky working.

Sample Implementation

.container {
  min-height: 100vh;
  width: 100vh;
  background-color: yellow;
}

#up-arrow {
  width: 45px;
  height: 45px;
  border: 2px solid #23ADF8;
  border-radius: 23.5px;
  background-color: #23ADF8;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}

#up-arrow:hover {
  background-color: white;
}

#up-arrow:hover img {
  filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}

#an-element {
  height: 100vh;
}

<div class="container">
  <div id="an-element"></div>
  <div id="up-arrow">
    <a href="#top">
      <img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
    </a>
  </div>
</div>

OR

use position: relative; parent and position: absolute; child

Working Fiddle

.container {
  height: 100vh;
  width: 100vh;
  background-color: yellow;
  position: relative;
}

#up-arrow {
  width: 45px;
  height: 45px;
  border: 2px solid #23ADF8;
  border-radius: 23.5px;
  background-color: #23ADF8;
  position: absolute;
  bottom: 0;
}

#up-arrow:hover {
  background-color: white;
}

#up-arrow:hover img {
  filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}

<div class="container">
  <div id="up-arrow">
    <a href="#top">
      <img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
    </a>
  </div>
</div>

score 0 · Answer 2 · edited Mar 30 '22 at 06:36

as you haven't wrote any other content sitcky position may not work fine. please review below stuff and you might get what you want,

.container {
  height: 300vh;
  width: 100vh;
  background-color: yellow;
}

#up-arrow {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  width: 45px;
  height: 45px;
  border: 2px solid #23ADF8;
  border-radius: 23.5px;
  background-color: #23ADF8;
}

#up-arrow:hover {
  background-color: white;
}

#up-arrow:hover img {
  filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}

<div class="container">
  <div style="background: red;">Scroll</div>
  <div style="height: 300px; background: orange;"></div>
  <div class="sticky">Sticky Section</div>
  <div style="background: pink;">Scroll</div>
  <div style="height: 300px; background: green;"></div>
  <div class="sticky">Sticky Section</div>
  <div style="background: red;">Scroll</div>
  <div style="height: 300px; background: orange;"></div>
  <div class="sticky">Sticky Section</div>
  <div id="up-arrow">
    <a href="#top">
      <img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
    </a>
  </div>

  <div style="background: pink;">Scroll</div>
  <div style="height: 300px; background: green;"></div>
  <div class="sticky">Sticky Section</div>
</div>

Note: I have made sticky at bottom position and for your understanding how bottom positioned sticky works I've also added some stuff below sticky positioned content. Whenever content below sticky position renders position of screen will be initial(normal).

References: https://www.w3schools.com/howto/howto_css_sticky_element.asp

CSS position: sticky; bottom: 0 not sticking to bottom

2 Answers2