sticky element move outside parent element
So... I don't really have an issue. It's just a question... But, i have always thought an element with position:sticky; cannot move outside the parent element. But i just realized today that it can actually move outside parent element... But this is really strange.
To make position:sticky; element move out from parent element, the parent element needs
display:initial;. But the strange thing about this is that as far as i know display:initial; will revert the display value to it's initial value (the default value) but even if you have never changed the display value of the parent element, it the sticky element wont follow until you add display:initial; to parent element.
Can anyone explain this to me because this really makes no sense at all. I am so confused 😂
Here is a codepen example...
https://codepen.io/tok124/pen/LYvYeLo45 Replies
yea interesting 🤔 its removing block from the div no clue what its reverting to though 😮
I think this only works if the parent is a child of body though 🤔
Oh no maybe it does 🤔 kinda a neat hack I'm really curious now too
Yeah. super strange hahaha
Yeah indeed. This is super strange, i really hope someone could actually figure out what is actually going on here xD
yea so it has to be a child of body
Aah okay
otherwise you have to make all parents up to body have display: initial; 🤔
Yeah haha
I'd be curious how other browsers handle this, I might play more later
Yeah, so far i've only tested this in edge... I wonder if it would work the same in firefox 🤔
This seems to kinda work like
display: contents; ... it like ignores the div
Which if that is the case I would just use thatOh yeah ! This is true yeah
Maybe it reverts it to display:contents; but thats strange... Because this is not the initial value xD
i am just really curious why it works with display:initial; but yeah, i would definitely rather use
display:contents;Yea if you try to style the .parent it just goes nope..
thin line xD
display: contents; ignores it all together but yea oddity for sure
Ooh haha, yeah thats strange lol
Yeah lol. so strange 😂 😂 This is the first time a couple of years that i actually scratch my head about something CSS related haha
I mean it wipes the display: block; from it idk what it makes it 🤣
Yeah exactly. the initial value is block. So it should revert it back to block lol
But seems like that is not what is actually happening ^^
yea no clue
Yeah haha
cause its like ok... I'm block but you want me to be initial and goes.......... derp derp
Yeah hahah 😂
body display xD
which is block...
Yeah :p body is block too ^^
i wonder if display:inherit; would also work hmm...
Gotta try that
Nope
right cause that would just inherit the block again
Yea ^^
but initial "should" be block too so yeah... :p
thought there was a small chance this would work but nope lol
yea I would probably use
display: contents; as its specific to what it does
I'm trying to test the differences to see if there is a reason to hack it this way but 🤷♂️Yeah. without any doubts. But i am just curious why this happens with display:initial; xD
We're hoping kevin explain this strange thing hehe
I mean this is some browser level shit 😄 Not sure Kevin can help us here.
We need one the google dev rels or something maybe 😂
I have guts he know this one hahaha
I have doubts he does
Yeah, i also doubt he knows the answer to this question :p But would be interesting if he does know. He is so great at explaining 😀 😂
Is this ist? https://codepen.io/Ghloo/pen/yLrLEWB
this sticky element does not move outside of the parent element. This behaves as a sticky element is supposed to behave, it sticks at the end of parent 🙂
and the text does go outside the parent. but thats just because the text is overflowing your element with position:sticky;
as seen here
Sry, must have musinderstood the intention. / Well, sticking withinhe parent is how I ubderstand stickyness. Otherwise the way would be a scroll event - as soon as the div is x from top, gvie it a class to make it fixed.
Yeah. but when you do display:initial; on parent element, the sticky element actually does move outside of the parent element
It was but a cruded emo focused on sticking.
But does it not break something else? / Honestly, only use stickines rarely.
It probably does. I am just curious why the sticky element moves outside the parent when parent has display:initial; because the initial value is block so it display:initial; should have no effect unless you have previously set display:inline; for example and you want to revert it to the default value. Then display:initial; would revert to block again. but display:initial; has no effect if you have not changed the display value previously
But in this case... It does have a strange effect
I do not think you can break off the parent with stickiness. Really, I would go the scroll event way myself.
that allows sticky elements to move outside of it
Scroll to top and check my pen 🙂
It does work
I did. Saw that display:initial ... and removed it in my fork, as it was wreaking strange havoc. It actually gives me black bar at the top only.
Yeah, if you remove the display:initial; then the navbar will not move outside parent. so navbar will not follow as you scroll down the page. But when parent has display:initial; the sticky element does move outside when you scroll. This is not supposed to happen.
And like i wrote above, i do not have an issue with this. It's just something i discovered and was really curious about.
I expext all sorts of interesting behaviors if you stretch CSS enough ... or come across some so far obscure rule.
Yeah. CSS can be very interesting and mysterious. But i have used CSS for around 15 years now and i write CSS every single day for many hours. This is the biggest mystery that i have ever come across... So yeah, thats why i decided to post here because i am super curious about why this happens