position:sticky; doesn't work
Well... it does. If i define the height for the parent element (.container), the sticky element works flawless. But the height is supposed to be defined based off the height of the child element in the middle. There's 3 of them and 2 are supposed to be sticky. Check my comment for
.container
https://codepen.io/Hej-123/pen/bGZVMjx
(yes the code is very messy and i'm well aware of it🤡 )15 Replies
because its a flex item and they streach by default so to make it work you need to add
align-self:start
on the character
classwhat about the height of .container?
(spoiler: it doesnt work and i'm already using align-self:flext-start on .character)
remove the height
that's literally my codepen
no height on
.container
and align-self:flex-start
on .character
dude
i thought you were talking about .container
well yes that works
but if i use it in my vs code and the images are visible, it breaks
if i remove the source for the images in my folder, it works
alright, i found the issue
"<img class="character-img" src="character.png">" this breaks the position:sticky
if i remove it, it works with your code
yeah i tried using another image and it worked
a jpg file
is it because it's png? nah that makes no sense
oh that's interesting, the 3rd child element is still not working
it's supposed to behave the same as .character
yet it has the same properties
that element gives the height for the whole container
which one? .footer-right?
yup
oh
wait a minute
remove the height from the middle one
yeah yeah now it's working
hahahah
using fixed heights leads to headaches worry been there done that 😄