The Top/left/right/bottom of CSS learning every day

Top: The range is either a value or a percentage, plus or minus. This value indicates how many pixels are at the top of the distance. For example top:10px; 10 pixels from the top.

Left/right/bottom is the same as top, but the direction is different.

These properties are generally used in conjunction with position. Valid only if the value of position is relative, absolute, or fixed.

Note: When position is relative, the label is based on the document flow, and when position is absolute, the label is detached from the document flow. Fixed is the same as absolute.

1, regardless of whether the parent element or ancestor element has set the Position property value, when the current label's position is relative, and the left and top properties are assigned, the label is calculated based on the upper-right corner of the immediate parent element, not out of the document flow, if there are elements in front of the label. The label will move downward;

2, if a lot of ancestors of a tag set position to Relative/absolute/fixed, and then to the current label position settings Absolute, to the left and top properties, it is based on The nearest upper-left corner of the ancestor of the position is set to be computed;

If the ancestor element does not have a position value set, the label is calculated based on the upper-left corner of the entire screen.

3, for position is fixed label, is always based on the entire screen to calculate.

The Top/left/right/bottom of CSS learning every day