Various ways of positioning CSS and the differences between them

When doing front-end layout, we often use positioning. Positioning is an important part of CSS. Positioning is performed using the position attribute. Position has many values. Specifically, it has the following attribute values. . Common attributes are as follows:

Value Description

absolute Generates an absolutely positioned element, 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 Generates absolutely positioned elements, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
relative Generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.
static Default value. Without positioning, the element appears in normal 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.

First of all, we are using the standard box model here, so everyone must think of it as a box or a frame when analyzing it. Let's first learn about the first default parameter static.

static: Static positioning is the default value of position. The element box is generated normally, that is, it is displayed normally without positioning.
absolute: Absolutely positioned
elements are removed from the document flow and positioned relative to the containing block. The element is closed in its original space. A block-level box is generated after the element is positioned, regardless of whether it was originally an inline element or a block-level element.
The containing block here refers to the ancestor element (block level or inline) whose latest position value is not static. Generally, an element is designated as the containing block of the absolutely positioned element, and its position is set to relative without offset.

fixed: fixed positioning
The element is detached from the text flow, removed from the normal text, and positioned relative to the browser window, so it does not move as the document scrolls. The element is closed in its original space. A block-level box is generated after the element is positioned, regardless of whether it was originally an inline element or a block-level element. The only difference from absolute positioning is the containing block. Containing block: browser window.

relative: relative positioning. Relative positioning, the most common ways to use it are as follows:
Usage method 1: The element is offset by a certain distance relative to its original position, but the original space is still retained and appears as blank.
Usage method two: Set an element to position: relative; to make the child elements of the element absolutely positioned relative to the element.

Absolute/fixed and float comparison
The same thing: the elements will be separated from the text flow and deleted from the ordinary text, but it will still affect the layout; a block-level box will be generated, regardless of whether it is originally block-level. element.
Difference: The containing block of float is the nearest block-level ancestor element.

Set offset attributes: top/right/bottom/left, the initial value is auto.
After using position positioning, you must use the offset attribute to define the offset, which is the offset relative to the containing block. What you need to pay attention to when using it is that the element defining the offset should be an element whose position value is not static.
Sometimes it is also necessary to define width and height, but it may conflict with the definition of the offset attribute, because the four offset attributes actually define the size of the element. At this time, the left and right are defined according to the width and left attributes, and the top and bottom are defined according to the top and height attributes.

Another property in CSS. Then the content overflows: overflow
Usually the content overflow attribute has the following values:
overflow: visible/ hidden/ scroll /auto/ inherit
The initial value of overflow is visible.
Overflow is what we often use: if the size of an element is fixed, but its content cannot fit, it will cause overflow. Overflow controls the visibility, invisible (hidden), and scroll visibility (scroll) of the overflow part.
Element visibility visibility: visible/ hidden/ collapse/ inherit, the initial value is visible.

The above is the detailed content of Various ways of positioning CSS and the differences between them. For more information, please follow other related articles on the PHP Chinese website!