Flex Layout (Flat layout)

Container properties

flex-direction

Control flow direction

flex-wrap

Controls whether to wrap

justify-content

Controls the alignment of spindle elements

align-items

Controls the alignment of sub-axis elements

align-content

Control multiple lines of content

CSS Positioning (Vertical Layout)

The hierarchy of a DIV

  1. The bottom layer is the background
  2. The next layer is the border
  3. The next level is the block-level child element
  4. One level above is the floating child element
  5. The top layer is the inline child element (understood as literal content)

positionattribute

  1. relativeFor relative positioning, the actual space occupied by an element remains the same (as determined by other elements), but it can be moved on display
  2. absoluteFor absolute positioning, its position is relative to that of the nearest parent element that is not static, usually on the parent element of the element to which absolute positioning is intendedrelative
  3. fixedPosition relative to viewPort

As soon as the element is a positioning element, it goes to the top layer

Z-index controls the number of layers in which the element is located

Special property: Cascading context

The z-indexes of elements of the same level can only be compared to each other

The Z-index of an inner element does not affect the Z-index of its parent element

Negative Z-index only works in elements that are not in a cascading context