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🤡 )
JSNewbie
CodePen
test
...
No description
15 Replies
Mannix
Mannix•10mo ago
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 class
☀🌸el capysarah🌸☀
what about the height of .container? (spoiler: it doesnt work and i'm already using align-self:flext-start on .character)
Mannix
Mannix•10mo ago
remove the height
☀🌸el capysarah🌸☀
that's literally my codepen no height on .container and align-self:flex-start on .character
Mannix
Mannix•10mo ago
dude
.character {
/* display: flex; */
background-color: rgb(255, 255, 255);
/* height: fit-content; */
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
position: sticky;
align-self: flex-start;
top: 0;
height: 620px;
width: 350px;


}
.character {
/* display: flex; */
background-color: rgb(255, 255, 255);
/* height: fit-content; */
padding: 10px;
box-sizing: border-box;
border-radius: 4px;
position: sticky;
align-self: flex-start;
top: 0;
height: 620px;
width: 350px;


}
☀🌸el capysarah🌸☀
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
Mannix
Mannix•10mo ago
seems to be working here https://codepen.io/MannixMD/pen/KKEgwza with the images
☀🌸el capysarah🌸☀
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
Mannix
Mannix•10mo ago
that element gives the height for the whole container
☀🌸el capysarah🌸☀
which one? .footer-right?
Mannix
Mannix•10mo ago
yup
☀🌸el capysarah🌸☀
oh wait a minute
Mannix
Mannix•10mo ago
remove the height from the middle one
☀🌸el capysarah🌸☀
yeah yeah now it's working hahahah
Mannix
Mannix•10mo ago
using fixed heights leads to headaches thumbup worry been there done that 😄
Want results from more Discord servers?
Add your server