'CSS position: sticky; bottom: 0 not sticking to bottom [duplicate]

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>
css


Solution 1:[1]

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>

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nitheesh
Solution 2 Nitheesh

Related Questions