Why Doesn't `position: sticky` with `bottom: 0` Stick to the Bottom?

Why Bottom:0 Isn't Working with Position: Sticky

When attempting to position an element to the bottom of its parent using position: sticky and bottom: 0, you may encounter this issue. Although sticky can effectively keep an element at the top of its container, it fails to do so at the bottom.

The reason lies in the definition of position: sticky. According to the documentation, a stickily positioned element is treated as relatively positioned until its containing block reaches a specific threshold. However, it becomes "stuck" when it encounters the opposite edge of its containing block.

In the provided code, the element with position: sticky and bottom: 0 will only become stuck once the bottom of its containing block (in this case, the pink block) reaches the opposite edge of its flow root (where the element is located). Just like its top counterpart, it will only become fixed or sticky when it reaches the top edge within the flow root.

However, since the bottom of the sticky element is already at the edge, there's no opposite edge to become stuck to. As a result, the element cannot be fixed to the bottom and will simply stay in its initial position.

To demonstrate, increase the margin of the block element to place it outside the screen. When you scroll slowly, you'll notice the sticky element moving to the bottom of the pink block once it reaches its opposite (top) edge within the flow root.

The above is the detailed content of Why Doesn't `position: sticky` with `bottom: 0` Stick to the Bottom?. For more information, please follow other related articles on the PHP Chinese website!