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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.