CSS sticky positioning sticky detailed explanation

I found a good thing

Introduction: position:sticky is a new attribute of css positioning; it can be said that A combination of static (no positioning) and fixed positioning; it is mainly used for monitoring scroll events; simply speaking, during the sliding process, when the distance between an element and its parent element reaches the requirements of sticky positioning (such as top: 100px); position: sticky, the effect at this time is equivalent to fixed positioning, fixed to the appropriate position

Before talking about sticky positioning, let’s talk about other positioning of position,

absolute: Generate absolute Positioned elements are positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

fixed: Generate fixed-positioned elements, positioned relative to the browser window (old IE does not support it). The position of the element is specified by the "left", "top", "right" and "bottom" attributes. .

relative: Generates relatively positioned elements that are positioned relative to their normal position without breaking away from the document flow.

static:

Default value, no positioning, the element appears in the normal document flow (ignoring top, bottom, left, right or

z-index declarations). inherit specifies that the value of the position attribute should be inherited from the parent element.

Use of sticky:

#sticky-nav {
    position: sticky;
    top: 100px;
}

Set position:sticky and give one of (top, bottom, right, left) at the same time

Conditions of use:

The parent element cannot have overflow:hidden or overflow:auto attributes.

One of the four values ​​​​of top, bottom, left, and right must be specified, otherwise it will only be in relative positioning

The height of the parent element cannot be lower than the height of the sticky element

sticky Elements only take effect within their parent elements

Pitfalls in the project

Problem description:

In a small program development project; the tabs component is used Sticky positioning, including tab bar switching; the bottom of the tab bar is a display of a large list-container content; the display content includes click events (or touch events); click testing in ios and pc browsers It's normal; but in Android phones! ! ! ! Oh my god, it clicked through! ! Moreover, I tried to remove the click jump of the item in the list-container, and found that the click of the tab switch did not respond, and the event disappeared! ! ! Set breakpoints to see the direction of the event flow: first event capture-->target node tab-->event bubbling; this bubble actually popped up to the item in the container-list. . . It’s a nightmare. Rough project structure:

html structure:

<div class="service-wrap">
        <tab>这是tab切换</tab>
        <div class="list-container">
            <!--for循环有很多item-->
            <item></item>
            <item></item>
        </div>
    </div>

Solution:

When using the tab of the component library, put a div in the outer layer to prevent click penetration And abnormal event flow trend or (a method that treats the symptoms but not the root cause, depending on the business scenario)

. The style of the component library cannot be changed, sticky is used as the inline style of the tab component, because when I use this tab, Directly on the top of the viewpoint, this can be achieved using fixed. I set position:fixed !import outside the calling class; the highest priority of the style overrides the positioning style in the component library, and everything is normal.

Recommended tutorials: "PHP Tutorial" "CSS Tutorial"

The above is the detailed content of CSS sticky positioning sticky detailed explanation. For more information, please follow other related articles on the PHP Chinese website!