position attribute in css

In CSS layout, position plays an extremely important role. Many web page layouts must be completed using position. position has four attribute values: static, absolute, relative, and fixed.

static

This attribute represents the default position. When setting it, you can cancel the inherited attribute. Under normal circumstances, you do not need to set this attribute.

absolute

This attribute represents absolute positioning. An absolutely positioned element is positioned relative to its nearest positioned ancestor, or, if the element has no positioned ancestors, its position is relative to its original containing block. The space previously occupied by the element in normal document flow is closed, as if the element did not exist. For example, if the previous block uses absolute positioning and the next block is not set, the two blocks will overlap. A block-level box is generated when the element is positioned, regardless of what type of box it originally generated in the normal flow. For example, position an element absolutely and then move it relative to its starting point by setting its vertical or horizontal position.

If you set top to 10px, the box will be 10 pixels below the top of the container that contains it. If left is set to 10 pixels, then the box is moved 10 pixels to the right relative to the left border of its container.

relative

This attribute represents relative positioning. The element frame set to relative positioning will be offset by a certain distance. The element retains its unpositioned shape and the space it originally occupied.

If you position an element relatively, you can then move the element relative to its starting point by setting the vertical or horizontal position.

If you set top to 20px, the box will be 20 pixels below the top of its original position. If left is set to 30 pixels, then 30 pixels of space will be created to the left of the element, which will move the element to the right.

fixed

This attribute represents fixed positioning, which is used to position relative to the browser window. If top is set to 20px, then the box will be 20 pixels below the top of the window. The same applies to other positions. The position can also be expressed as a percentage. .

Its effect is that no matter how the browser's scroll bar is pulled, the element set with this attribute will not change its position.

The following code is a layout I made using positioning. Its effect is:

If we can flexibly use several attributes of position, we can make many beautiful and beautiful layouts.