Skip to content

[css-position][css-sticky] Position: sticky doesn't work when it has several HTMLElements with margin before it #3923

Closed
@Konrud

Description

@Konrud

Steps to reproduce the problem:

  1. Add <p> element with text and optionally with margin and some other elements before the element you want to set as a sticky
  2. Set position: sticky; top: 0; on the element, you want to be sticky
  3. Scroll down to see that element is actually stays in its place and doesn't behave as a sticky.

What is the expected behavior?
The element should behave as a sticky element.

What went wrong?
The element stays in its place and doesn't behave as a sticky.

Code example: http://bit.ly/2HeL6Si

NOTE:
Position sticky won't work until there are HTMLElements before it in the DOM e.g. <p> element with margin. If you, however, delete all the elements before it in the DOM position sticky will work as expected.

Chrome version: 74
OS Version: Windows 7

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions