Position sticky

Why do I see the text flowing of his block element and going in the background of other block elements?
Shouldn’t it stay in its block element?

Position: sticky is a bit funky. It takes a document out of the flow so can display funny. Add in a second position: sticky (like you’re doing in your example), and you see the floating thing you see. Especially when the different position sticky elements are in a different DOM level than each other.

The easiest way to handle that is to set the z-indexes (higher numbers get laid on top) to however you want to stack it.

1 Like

Your Introduction is sticky at top:0 and so is your child1 which means they will sit on top of each other. As Dave said above you could add a z-index to the one you want on top as required but they will still occupy the same space.

If you wanted child1 to stop short of the introduction then you’d need to set a top position that is taller than the introduction.

e.g.

.child1{
    background-color: lightcoral;
    position: sticky;
    top: 1.2rem;/* magic number alert*/
    left: 0px;
}

However that relies on the introduction always being the same height (hence the magic number alert). If the introduction is a variable height then it’s not safe to do the above.