Kevin Powell - Community•11mo ago

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

...

15 Replies

Mannix•11mo 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🌸☀OP•11mo ago

what about the height of .container? (spoiler: it doesnt work and i'm already using align-self:flext-start on .character)

Mannix•11mo ago

remove the height

☀🌸el capysarah🌸☀OP•11mo ago

that's literally my codepen no height on .container and align-self:flex-start on .character

Mannix•11mo 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🌸☀OP•11mo ago

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•11mo ago

seems to be working here https://codepen.io/MannixMD/pen/KKEgwza with the images

☀🌸el capysarah🌸☀OP•11mo ago

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•11mo ago

that element gives the height for the whole container

☀🌸el capysarah🌸☀OP•11mo ago

which one? .footer-right?

Mannix•11mo ago

yup

☀🌸el capysarah🌸☀OP•11mo ago

oh wait a minute

Mannix•11mo ago

remove the height from the middle one

☀🌸el capysarah🌸☀OP•11mo ago

yeah yeah now it's working hahahah