In the SCSS file implementation of SAP Spartacus, it can be observed that many position properties have different values: absolute or relative:
The initial value of the position property is static.
Firstly, you need to understand the three positioning schemes in the CSS.
In CSS 2.1, a box may be laid out according to three positioning schemes.
- Normal flow : In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
- Floats : In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
- Absolute positioning : In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
normal flow
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.
In normal flow, boxes belong to one of the formatting contexts, block or inline, but not both.
More of Jerry’s original articles can be found in “Wang Zixi” :
