css--relative positioning, absolute positioning, fixed positioning

Relative positioning:

When the elements are set relative or absolutely positioned, the cascade is automatically generated , and their cascade level is naturally higher than the text flow unless set to a negative value of z-index.

And we find that when the relative positioning element is shifted, the surface is out of the text flow, but in fact in the flow of the original relative positioning left the original total width and total height.

Absolute positioning:

Relative positioning can only be moved up and down the position in the text flow, there are some limitations, although his performance area from the text flow, but in the text stream still reserved a place for it, the position does not change with his movement.

If you want the text stream to discard this part, you need to use absolute positioning. Absolute positioning is not only out of the text stream, but also in the text stream does not leave the absolute positioning element in the exclusive slot

When the parent layer position property is the default value, the coordinate origin of the sub-layer positioning starts with the body 's coordinate origin.

When we want the positioning element to have an absolute positioning, but also want the absolute positioning of the coordinates of the origin can be fixed at a certain point in the page, we can set the absolute positioning of the parent is relative positioning or absolute positioning. Then the coordinates of the absolute positioning will start with the parent as the coordinate starting point.

Note, however, that this reference point is not the parent's coordinate origin, but the padding upper-left edge point of the parent block .

Fixed positioning:

This fixation is similar to absolute positioning, except that the absolute positioning is fixed to a certain location in the Web page, and the fixed position is fixed in the browser's view frame position. In other words, the relative browser window is positioned. How the page scrolls, the box shows the same position

Points to note:

1. After the absolute positioning, the label will not distinguish between the so-called inline elements, block-level elements, you do not need to display:block; set the width of the high.

2. If the top description, then the location reference point is the bottom left corner of the page, not the upper left corner of the browser, if described by bottom, referring to the browser's first screen size corresponding to the lower left corner of the page.

3. Absolute positioning of the box center: After absolute positioning, all standard flow rules, are not applicable. So margin:0 auto;

Workaround: Write it down as a formula. It is left:50%;margin-left: Half the width of the negative.

4. Fixed positioning is not compatible.

From

27569233

Https://www.cnblogs.com/gchlcc/p/6295199.html

css--relative positioning, absolute positioning, fixed positioning