The arrangement of elements in the document is mainly arranged according to the cascading relationship;
forms a cascading context:
1), root element
2), the attribute value of position is: absolute | relative, and the z-index value is not auto;
3), position value is fixed | stick ;
4), the flex element whose z-index value is not auto, that is, the parent element attribute display: flex | inline-flex;
5), elements whose opacity attribute value is less than 1;
6), elements whose transfrom attribute value is not none ;
7), elements whose mix-blend-mode attribute value is not normal;
< p> 8), filter, perspective, clip-path, mask, mask-image, mask-border ;
9), elements whose perspective value is not isolate;
10), will- Any css attribute specified in change Property, even if the value of these attribute pairs is not directly specified;
11), the -webkit-overflow-scrolling attribute is set to touch Element;
z-index
z-index is only used for positioning elements, it is invalid for non-positioning elements, it can be set to positive integer, negative integer, 0, auto; if a positioning element does not set z-index , Then the default is auto;
The z-index value of the element is only meaningful in the same stacking context. If the cascading level of the parent cascading context is lower than that of another cascading context, then it is useless to set its z-index higher;
stacking order
stacking order (stacking order, stacking order) describes the elements in The order rules in the same cascading context, starting from the bottom, there are seven cascading orders:
1), background and border;
2), negative z-index value;
3), block-level elements;
4), floating elements;
p>
5), inline elements;
6) , Z-index: 0;
7), positive z-index value;
In addition to the cascading order rule, there is another rule, that is: come from behind;
< span style="font-size: 15px;">document flow
document flow is divided into three types: regular flow, floating, absolute Positioning;
BFC
BFC (block Form atting Context) block-level formatting context, which is a rendering area used to lay out block-level boxes. In contrast, there is IFC (inline Formattion Context) inline formatting context;
The scope of a BFC includes all the child elements that create the context element, but does not include the internal elements of the child elements of the new BFC created;
triggers BFC in the following ways:
1), the root element, namely HTML tags;
2), floating elements, that is, elements with a float value of left | right;
3), the overflow value is not visible, that is, the value is auto | scroll | hidden;
4), display value is inline-block, table-cell, table-caption, table, inline-table, flex, inline-flex, grid, inline-grid;< /p>
5), positioning element: position value is absolute, fixed;
6), contain is the elements of layout, content, and paint;