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

Question

This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
(3 answers)
Closed 11 months ago.
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>

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

Answer 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