Understand the position attribute in css, cssposition

Understand the position attribute in css, cssposition

In the actual development of the page layout, the use of position, the effect of positioning block-level element Nesting is always not very understandable, here are a few tests

In w3c, we can easily obtain the definition:

Static: default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or z-index declarations ).

Fixed: generates absolute positioning elements, which are located relative to the browser window. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes.

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

Absolute: generates absolute positioning elements, which are located relative to the first parent element other than static positioning. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes.

Relative: generates relative positioning elements and locates them relative to their normal locations. Therefore, "left: 20" adds 20 pixels to the LEFT position of the element.

In general:

StaticThat is, the normal document flow order. The default value is "not positioned!

FixedIt is relative to the browser window, that is, how to scroll the scroll bar, and whether it is still the position, it is like "sticking" to the window!

　　InheritThat is, inherit the position attribute value from the parent element,

AbsoluteHowever, the original position of the Document Stream does not continue to occupy. If the parent element of the file has been located, whether it is absolute or relative, it is located relative to its parent element. If the parent element is not located, it is located relative to the body. That is to say, absolute definitely has a reference!

RelativeIn this case, the original location of the Document Stream will not be removed, and it will continue to be occupied. It is located only relative to its original location!

The first three are easy to understand. For the combined use of absolute and relative, several tests were conducted.

Test (absolute and relative)

1. Separate absolute and relative

2. relative in relative, relative in absolute

3. absolute in absolute and absolute in relative

　　

<! DOCTYPE html> 
In fact, many of the online experiences are complicated. Only by practicing them can you really understand them.