The Position property in CSS

The position attribute used in CSS+DIV,CSS recently to make a Django page is a bit less understood. Take a note here to review.

There are several optional values for the Position property:

• Static

• Relative

• Absolute

• Fixed

Where the static value is best understood, the value specifies that the element appears in the normal flow of the document (at the same time, if there is a top, bottom, left, right , or Z-index declaration, all will be ignored, because these values are not for static), That is, according to the order of elements, how to format the layout in turn. If the element does not specify the position attribute, the default value is static.

When the Position property value is relative, this "relative" is understood to be positioned relative to its default position, or moved. For example, when position is relative, left:20px and top:30px are declared at the same time, then the element will move 20px to the right relative to its default position and move 30px down. Other elements may be obscured after the move, and can be qualified hierarchically through the Z-index attribute.

Position property value is absolute a bit not good to understand. This is a case in point.

Starting from the current element, look for the parent element with the position attribute and the property value not static (this should be the ancestor element, because it is not necessarily the upper element, it may be two, three, etc.), if you can find such an ancestor element, Then it will be positioned from a corner of the inner border of the ancestor element (top, left, right, bottom, and so on), notice that the corner is a corner of the padding area, not a corner of the width*height. If no such parent element is found, it is positioned from a corner of the browser instead of a corner of the body.

Another point to note is that if the element with the position attribute does not specify any top, right, bottom, and left values (which is normally done by the brain), when position is a relative, Equivalent to the designation "top:0px; left:0px; ". When position is absolute, it is equivalent to the appearance of no position value as static. Even when only one direction of TRBL is specified, the specified direction is based on the ancestor element that specifies the position attribute, or the browser is positioned, and the direction that is not specified is equivalent to the position value for static positioning, resulting in inconsistencies.

It's really a good idea to make this clear , but it's not even a picture. Perfect later

This article is from the "Trikker" blog, make sure to keep this source http://trikker.blog.51cto.com/7478890/1543552

The Position property in CSS