I have a very simple need: make and element sticky on the right side of the screen.
All works fine in Firefox, but in Chrome the right: 0
property is ignored.
I said nevermind, I can achieve my goals by using left: calc(100% - 80px);
but this is a lucky case, when I know the width of the sticky element.
However then I was baffled: while the workaround stated above works as expected (the elemtn sticks to the right), so does left: 100%;
, so does left: 2000%
for that matter, without triggering overflow (tested in Chrome and Firefox). I am clearly missing something. Maybe I don't understand left and right positioning of sticky elements, although there are clearly differences between Firefox and Chrome.
left: calc(100% - var(--element-width))
totally makes sense, but can anyone explain: why is right
ignored and why is left: 100%
and left: 2000%
for that matter also working (i.e. it positions the element where I would expect right: 0
to position it, when it should clearly overflow.)
.wrapper{
width:100%;
position:relative;
}
.container{
height: 2000px;
}
.floater{
position:sticky;
height:200px;
width:80px;
background:red;
top:200px;
right:0;
}
<div class="wrapper">
<div class="container">
<div class="floater">
hei!
</div>
</div>
</div>
right: 0
works as (I) expected in FF.