How to use css positioning? How to use css positioning

What this article brings to you is about how to use css positioning? The method of using CSS positioning has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

position

1. static : Default, the element appears in the normal flow.

2. relative: Relative positioning, relative to the normal position, the original position is occupied.

3. fixed: Fixed positioning, relative to the browser window.

4. Absolute: Absolute positioning, positioned relative to the first parent element other than static positioning. If there is no positioned ancestor element, positioned relative to the original containing block. Subsequent elements occupy their original space, and the element is taken out of the document flow.

5. sticky: Position based on the user's scroll position. Toggles between position:relative and position:fixed positioning.
   It behaves like position:relative; and when the page scrolls beyond the target area, it behaves like position:fixed; and it will be fixed at the target position.
   Element positioning is relative positioning before crossing a specific threshold, and fixed positioning thereafter.
   This specific threshold refers to one of top, right, bottom or left. In other words, only by specifying one of the four thresholds top, right, bottom or left can sticky positioning take effect. Otherwise the behavior is the same as relative positioning.

6. inherit: Inherit the value of the position attribute from the parent element.

Detach from the document flow: use float, absolute, fixed. (Elements that are separated from the document flow no longer occupy their original positions)

Note: absolute cannot be used with float at the same time.

The above is about how to use css positioning? A full introduction to the use of css positioning. If you want to know more about CSS video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to use css positioning? How to use css positioning. For more information, please follow other related articles on the PHP Chinese website!