By using the Position property, we can select 4 different types of positioning, which affects how the element box is generated.
Position the meaning of the property value:
-
Static
-
The element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.
-
Relative
- The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains. Tip: Relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal flow, so the relative positioning moves over the assembly to overwrite the other boxes.
-
Absolute
-
The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow . It also covers other blocks (if the position overlaps);
-
Fixed
-
the element box behaves like the position is set to absolute, but its containing block is the window itself.
of course block positioning can also be used with the Float property layout
Positioning problems in CSS
