Positioning in HTML

The positioning system in HTML

First, classification

1. Conventional flow static

2. Float float

3. Relative positioning relative

4. Absolute positioning Absolute

5 Fixed positioning

Second, the use of the distinction

In the layout of the Web page, it is often used in the 5 positioning method, the overall divided into three categories: static, floating float, absolute positioning (relative, absolute, fixed).

1. The default value is static

2. Float float

2 Questions to keep in mind when using a floating layout

1. Float causes the parent element to collapse highly

2. BFC Block Formatting context

* BFC can solve the problem of high collapse, with clear or overflow attribute to solve overflow not equal to hidden then create a BFC

The difference between clear:both and overflow

Clear to determine that external elements affect their layout

Overflow determine if the element affects the layout of the page

3. Absolute positioning

1. Relative positioning

Relative positioning retains the position in the regular flow, and the relative positioning of the actual coordinates in the original position, when relative positioning is used, the other elements are overwritten.

2. Absolute positioning

Absolute positioning does not retain a position in the regular stream, and when used, note the location of the origin (the ancestor element position is not equal to static), and if there is no such element, then the origin is the origin of the HTML containing block

3. Fixed position

Fixed positioning does not retain a position in the regular stream, the coordinates are the starting point for the current viewport

Third, in the normal site layout, a variety of layouts will be used, according to their actual situation specific use of different layouts.

Positioning in HTML