Why do you want to know position?
Position is not only a common test point in interviews, but also a solution that is not available in many CSS layouts, so we must master this knowledge.
What properties does Position have?
1. Static positioning is static
Static positioning means that the target elements use the normal layout, that is, the elements are arranged according to their default position in the document flow. Setting the top, right, bottom, left, and Z-index attributes does not work.
2. They are relative to each other
Relative positioning moves the position of the relative element when it is not positioned, leaving a blank in its position when it is not positioned.
3. Absolute positioning
Absolute positioning is first removed from the standard document flow, and there is no room for elements. Absolute positioning is offset relative to the nearest non-statically positioned ancestor element.
4. Fixed position
Fixed positions are separated from the standard document flow and do not leave space for elements. Fixed positions are offset relative to the screen viewport, and the position of elements does not change as the screen scrolls.
5. Sticky positioning
Sticky positioning is a mixture of relative and fixed positioning, with elements being relative before and after crossing a certain threshold, which is determined by viewport scrolling. Sticky positioning does not deviate from standard document flow.
What are the application scenarios of Postiton?
- Standard document flow is an example of static positioning.
- The classic example of absolute and relative positioning is the layout of children and parents.
- For example, the “like” button for digging forum articles is fixed in a certain position in the window and does not scroll with the scroll.
- A classic example of sticky positioning is head fixation.
Which locations will deviate from the standard document flow?
- Absolute positioning
- Fixed position