I'm trying to understand what css "sticky" does. I can get it to stick to the 'top' of its parent, but not to the 'bottom'
My test code is:
.block {
background: pink;
width: 50%;
height: 200px;
}
.move {
position: sticky;
bottom: 0;
}
1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>
When I have "move" set to 'top:0' it sticks to the top of the pink block, but when set to 'bottom:0' it seems no longer fixed/sticky.
It's working fine but you will see nothing. Let's have a look at the definition:
Give a big margin to the block element to hide it from the screen then start scrolling slowly
You will notice that when your element is showing the
BBB
is overlapping theAAA
until it reach its initial place. This is the sticky behavior when usingbottom:0
. So our element is keptposition:relative
and when the container start going out from the screen on the top, it become sticky to its bottom until it reach the opposite edge (the top of the container).Exactly the same happen with
top:0
but in the opposite direction:So sticky will not position the element to the top or the bottom but it will decide how the element will stuck in order to be visible when the container will disappear from the screen.
In order to obtain what you want you need to put your element in the bottom using other properties and keep it bottom sticky.
Here is an example where I place the element at the bottom using flexbox and I specify that I need it to be sticky at the bottom.
So
position:sticky
will never define the position of the element like we do withabsolute
orfixed
but it will define how the element will stuck when there is a scroll behavior.Here more examples to better understand:
Another common mistake with sticky is to forget about the height/width of the element relatively to the one of its parent. If the height of element is equal to the height of the parent (containing block) then logically there will be no sticky behavior because we are already at the opposite edge.
Notice the last case where the height of the parent is set to
auto
(default value) thus its height will be defined by its content which make the sticky element to have the same height as the containing block and nothing will happen because there will be no room for the sticky behavior.Try the following code:
You can find more about
position:sticky
on gedd.ski/post/position-stickyI hope it helps.
Peace.