Understand positioning

In html, there are two ways to change the layout. One is float and the other is positionpositioning. Today I will explain what positionpositioning is.

Position is a very important attribute in CSS. Through the position attribute, we can offset an element relative to its normal position, parent element or browser window.

The postion attribute is called positioning. It has 4 different types of positioning. These types will affect the way elements are generated. Below we explain the position attribute in detail.

Position has 4 attribute values: 1.static, 2.relative, 3.absolute, 4.fixed. these attributes.

Static: It is the default positioning. Without changing any positions, the web pages are arranged according to normal document flow rules.

Relative: It is relative positioning. Elements are ordered according to normal document flow. But you can change the position of the element through left, top, bottom, right and other css rules. Make the web page look more beautiful.

Absolute: It is absolute positioning: the element will be separated from the document flow. The element can be changed through: top, left, right, bottom, etc. css rules. The position of the element. Make your web page look beautiful.

Fixed: It is fixed positioning: the element will be separated from the normal document flow, and the element will be set at a fixed position on the browser and will not scroll with the element. Elements can change the position of elements through: top, left, right, bottom, etc. css rules.

Absolute: It generates absolute positioning. It is positioned relative to the parent element of the nearest level positioning that is not static. After the element is set to absolute, it will break away from the document flow and will not occupy the original space. The following elements will be replaced.

relative is translated into Chinese as relative positioning. After setting this attribute, the element will be offset according to top, left, bottom, and right. The key point is that its original space is still retained.

Fixed (not supported by old IE) generates absolutely (fixed) positioned elements, usually positioned relative to the browser window.

And relative is to generate relatively positioned elements, which are positioned relative to ordinary positions.

StaticThis attribute value is the default positioning of all elements. Under normal circumstances, we do not need to declare it specifically, but sometimes when encountering inheritance, we do not want to see the attributes inherited by the element affect itself. Therefore, you can use position:static to cancel inheritance, that is, restore the default value of element positioning.

Inherit: Inherited attributes, specifies that the value of the position attribute should be inherited from the parent element.

! Note: Many web pages are centered. In this way, when the elements are absolutely positioned, there will be deviations in the display at different resolutions. In this case, we can handle it through a method similar to the following:

The above is my explanation of the position attribute of the css attribute in html. The position function in css is very powerful and it is also a very practical positioning attribute. I believe that position positioning is a very commonly used attribute in web design. I hope my explanations can help you.