HTML floating and positioning method __html

Source: Internet
Author: User

About the three states used for float and position.
First of all, a brief introduction to the three states of position are fixed, absolute and relative, respectively.

First float is used to modify block-level elements, and here is an example of Div.

When the element makes a left float, it becomes a row, and if you use the right float, the elements are lined up, and the order is reversed (the green is on the left, while the right is on the right, and the red is on the left).
Float does not have any effect when used with the fixed modifier, because itself and out of the document flow can no longer float, but only through the specific values or percentages of absolute control position, and will not change as the page changes, so does not have any impact on other elements. Typically used as an element with global display.
Absolute will also break away from normal document flow, but the difference between him and fixed is that he will be influenced by the parent container, and if two elements are absolute at the same time, they will affect each other. Similarly, the float will be ineffective, not with the floating characteristics, the positioning method ibid. If one of the elements is absolute and the other is not, it will not affect each other and will directly overwrite the

Relative is the default arrangement in which the current element remains in the normal document stream.
Summarize:
Fixed: fix element position, break away from normal document flow, no matter how the elements in the page change, the current fixed element is always in place, generally used for some top menu
Absolute: Leaving the current element out of the normal document stream, changing the position of the current element (Left,top,right,bottom) does not affect the neighboring elements, if you use margin, The Padding property also does not affect the adjacent element (unless the adjacent element is also absolutely positioned)
Relative: The current element remains in the normal document stream, and the position of the current element (Left,top,right,bottom) does not affect the neighboring element, but if you leave the Margin,padding property value white, The nearby elements will be affected by the position and change

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.