Some research on Positoin, absolute, and Relative in CSS positioning

When using Div+CSS for website layout, you must consider the positioning issues in CSS when doing some special effects such as floating layers. This requires using the Positoin attribute and so on. Friends who are interested in css positioning, let’s take a look!

Positoin attribute has four values: static, fixed, absolute and relative. The latter two are often used in positioning in layout. As the name suggests, absolute refers to absolute positioning, that is, removing the object from the document flow. Drag out, use left, right, top, bottom and other properties for absolute positioning, while its cascade is defined by the z-index property. The object now has no margins, but still has padding and borders. Ralative refers to relative positioning, which is to offset the position in the normal document flow based on left, right, top, bottom and other attributes.
But what is the absolute law and what is the relative law? I have never studied it carefully before, and sometimes I am a little confused when it comes to specific applications. I believe many friends will also have this problem. I tested it specifically today and came to the following conclusions:

1. When the Positoin attribute value is Relative
The object’s original position is retained, and the objects behind it are retained as originally occupied. The document flow still maintains the original position
The value of Top represents the downward offset distance of the object relative to the original position
The value of bottom represents the upward offset distance of the object relative to the original position
When both exist at the same time, only Top works.

The value of left represents the distance to the right of the object relative to the original position.
The value of right represents the distance to the left of the object relative to the original position.
When both exist at the same time, only left takes effect. .

2. When the Positoin attribute value is absolute
The object is extracted from the document stream, and the original position is replaced by the subsequent object.
The value of Top represents the object The distance between the upper border and the top of the browser window
The value of bottom represents the distance between the object's lower border and the bottom of the browser window
When both exist at the same time, only Top takes effect; if both are not specified, the top The position will be consistent with the original document flow, that is, the vertical position will remain unchanged.

The value of left represents the distance between the left border of the object and the left side of the browser window
The value of right represents the distance between the right border of the object and the right side of the browser window
When both exist at the same time, only left takes effect ; If neither is specified, its left side will be consistent with the original document flow position, that is, the horizontal position will remain unchanged.

When the Positoin attribute value is absolute, if there is a first-level parent object (whether it is a parent object or a grandparent object, or any higher level, all are treated equally, ^_^) the Positoin attribute value is Relative, then The above relative browser window positioning will become relative parent object positioning, which is very helpful for precise positioning.
For more information about CSS, please refer to the manual: //m.sbmmt.com/xiazai/shouce/22

The conclusion reached after a long day of hard work ,hope its good for U.S. If there are any oversights, please correct me.

Related recommendations:

CSS positioning position and application scenario example analysis

##10 course recommendations on CSS positioning

The above is the detailed content of Some research on Positoin, absolute, and Relative in CSS positioning. For more information, please follow other related articles on the PHP Chinese website!