Detailed explanation and example analysis of attribute position in CSS_html/css_WEB-ITnose

position has five values: static, relative, absolute, fixed, inherit.

static

is the default value. It is laid out from top to bottom and from left to right according to the normal layout flow. Usually when we make web pages, we do not specify position, which means using static.

relative

It does not break away from the layout flow. At this time, you can use the top, right, bottom, and left attributes.

When top and bottom coexist, use the top value and ignore the bottom value;

When left and right coexist, use the left value and ignore the right value;

relative is the relative position , refers to the position when the position relative to the element is static:

top is how many pixels to move down relative to static (if top is a negative value, move up).

right how many pixels to move to the left relative to static (if right is a negative value, move to the right).

How many pixels bottom is moved up relative to static (if bottom is a negative value, it is moved down).

left How many pixels to move to the right relative to static (if left is a negative value, move left).

After using relative:

The original space will not be occupied by other elements.

element will not occupy the space of other elements in its final position. It floats above other elements.

absolute

Out of the layout flow, you can use top, right, bottom, left, but these attributes are no longer relative to the static position, but Relative to the containing block, relative to the inner edge of its border, not the inner edge of its padding.

After using absolute:

The original space will be occupied by other elements.

element will not occupy the space of other elements when it is in its final position. It floats above other elements.

fixed

Its mode is the same as absolute, but no matter how you drag the scroll bar, it is always fixed at the specified position on the screen. This attribute is not supported in IE6; this attribute is supported in IE7 but DOCTYPE needs to be specified; browsers such as Firefox support this attribute.

The top, right, bottom, and left attributes are relative to the viewport.

inherit

Inherit the position value of the parent element.

Name explanation

Viewport - By parsing the document, continuous media (such as the screen is continuous media, and the printer is page-based media) generates a visual for the user. Port (a window or other area displayed on the screen).