Css position resolution

Source: Internet
Author: User

1. position: static the default positioning of all elements is position: static, which means that the element is not located and appears in the document where it should be. 2. If position: relative is set to position: relative, you can use top, bottom, left, and right to move this element relative to the position where the element should appear in the document. [Meaning that the element still occupies the original position in the document, but it is visually moved relative to its original position in the document] 3. position: absolute when position: absolute is specified, the elements are separated from the document, that is, they are no longer in the Document. You can accurately locate the elements by setting top, bottom, left, and right. 4. position: relative + position: absolute if we set relative positioning for the div-1, all elements in the div-1 will be located relative to the div-1. 5, two columns absolute position # div-1 {position: relative;} # div-1a {position: absolute; top: 0; right: 0; width: 200px;} # div-1b {position: absolute; top: 0; left: 0; width: 200px;} 6. Floating definitely does not work for columns with variable heights. Here is another solution. We can move an element to the left/right, and the text is surrounded by it. # Div-1a {float: left; width: 200px;} 7. If we move an element to the left and the second element to the left, they will push up against each other. # Div-1a {float: left; width: 150px;} # div-1b {float: left; width: 150px;} 8. Clear the floating column after the floating element, we can clear the float so that other elements can be correctly located. # Div-1a {float: left; width: pixel PX ;}# div-1b {float: left; width: pixel ;}# div-1c {clear: both ;}

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: info-contact@alibabacloud.com 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.