Several ways of element positioning in page layout

Element localization （position）

Positioning is a more advanced layout method . Through positioning, elements can be placed anywhere in the page .
position Property has five values ：

• static ------ The default value is
• relative---- Relative positioning
• absolute -- Absolute positioning
• fixed ------- Fixed position
• sticky ------ Sticky positioning

Offset （offset）, There are four attributes ：top、bottom、left、right.
top The bigger the value is. , The more the positioning element moves down ;bottom The bigger it is , The more positioning elements move up .left = - bottom
left The bigger the value is. , The more the positioning element moves to the right ;right The bigger it is , The more positioning elements move to the left .left = - right

1、 Relative positioning

When the element of position Property value set to relative Open relative positioning when .
characteristic ：

1. No offset is set （offset） when , Elements do not change .
2. Relative positioning refers to positioning relative to the original position of the element .
3. Relative positioning raises the level of elements .
4. Relative positioning doesn't take elements out of the document stream , Will not change Element properties （ Inline elements 、 A block element ）.

Relative positioning

Sticky positioning
When the element of position Property value set to sticky Open sticky positioning . Viscous positioning is a kind of relative positioning , The difference is that the element can be fixed in a certain position .

2、 Absolute positioning

When the element of position Property value set to absolute Turn on absolute positioning .
characteristic ：

1. When absolute positioning is turned on , If you don't set the offset , The position of the element will not change .
2. The element is detached from the document stream .
3. Will change the properties of the elements — Inline elements become blocks , The content of the block will be expanded by the content .
4. Absolute positioning raises the element to a higher level .
5. Absolute positioning elements are positioned relative to their containing blocks .
   Containing block ：
   - Under normal circumstances , The containing block is the nearest ancestor block element to the current element .
   - In the case of absolute positioning , The nearest ancestor block element that opens the location （html Root element 、 Initial inclusion block ）.

Fixed position
When the element of position Property value set to fixed Open the fixed positioning . Fixed positioning is an absolute positioning , The difference is that you always refer to the browser viewport for positioning . Fixed positioned elements will not move with the scroll bar .

summary

In general work , Relative positioning and absolute positioning are mostly used , The other two compatibility have limitations .