The difference between layout and positioning: Layout is on the screen plane, positioning is perpendicular to the screen.
- The hierarchy of a DIV
As you can see from the image, the floating element is floating out of the document flow, just a little bit. The text content is covered according to the order in which it appears.
- Position attribute
- Static defaults to stay in the document stream.
- Relative Refers to a position that rises but does not depart from the document flow.
- Absolut is the non-static element of the ancestor.
- Fixed Indicates the fixed location. The positioning base is viewport.
- Sticky sticky positioning.
- Some lessons:
- If you write absolute, you have to write relative.
- If you write absolute or fixed, be sure to fill in top and left.
- Sticky has poor compatibility.
1. position: relative
Usage Scenarios:
- It’s used for displacement.
- Used as a reference element for absolute.
- Used with z-index: The default z-index value is auto. A larger value indicates a higher layer.
2. position: absolute
Usage Scenarios:
- Move away from the original position and create another layer, such as the close button of a dialog box
- Mouse prompt (as shown in figure: when the mouse hover button appears prompt message)
- This parameter is used with z-index.
Usage Scenarios:
- Annoying ads
- Back to top button
- This parameter is used with z-index.
— — — — — — — — — — — — — — — — — — — –
When an element adds a non-static positioning attribute, its level is higher than other elements. The schematic diagram is as follows:
- Cascading context
Metaphor: Each cascading context is a new small world (scope). The Z-index in this small world has nothing to do with the outside world. Only the Z-index in the same small world can be compared. Negative Z-index can’t escape the small world.
What non-orthogonal attributes can create a cascading context? Answer: developer.mozilla.org/zh-CN/docs/…
Z-index, flex, opacity and Transform are required to be memorized.