The layout is on the screen plane and the positioning is perpendicular to the screen.

A, layering,

Let’s start with the vertical layering of CSS. Take the layering of a DIV:

As can be seen from the layered picture, the scope of background background is the outer edge of border. And the float element is removed from the document flow.

The position property specifies the position of the CSS perpendicular to the screen.

2. Position attribute

There are several points about the value of the Position property:

  • Static — the default, to remain in the document flow;
  • Relative — relative position, elevated position, but not out of the flow of documents;
  • Absolute – Absolute location, the location reference is the location element of the nearest ancestor element;
  • Fixed — Fixed position. The base of position is the viewport, but some properties can change this feature;
  • Sticky — Sticky positioning.

The following describes the characteristics of each attribute value separately:

1, the relative

Usage Scenarios:

  • Used of displacement (rarely used)
  • toposition: absolute;The element’s parent element is addedposition: relative;.

2, absolute

position: absolute; – From the original position, another layer; When the position attribute of the child element is absolute, the ancestor element of the element is usually added: position: relative; .

  • Absolute is positioned for the location element relative to the nearest ancestor element. (Position element: element whose position attribute is not static by default)
  • If the element is not sized in two directions (top/bottom, left/right), some browsers will have positional confusion.
  • Negative margin andleft/right:50%;There will be intermediate effects: for example
left: 50%; margin-left: - width /2; orleft: 50%;transform:translateX(width /2)
Copy the code

3, fixed

Viewport – The area of the page that the user can see (excluding the TAB name and scroll bar at the top).

Fixed is positioned relative to the viewport. No matter how you slide the page, elements with position value fixed will be fixed in the viewport. However, later elements may change the page position, and a position value of fixed does not really fix the element to the viewport, so it is not recommended. And the position: fixed; There are a lot of bugs to use on mobile.

Fixed and absolute are both used to write top/bottom and left/right to ensure that the browser does not mess up.

4, sticky

position: sticky; Sticky positioning, the element is still in the document flow when the page does not slide to it; When you swipe over the element, it does not leave the viewport, but sticks to the top. However, this attribute value is not compatible.

3. Cascading context

Z – the index attribute

As shown in the figure above, the z-index attribute specifies the stack order of an element, with higher values coming first. But size cannot be separated from the context in which it resides.

Cascading context

Each cascading context is a small world, in which the Z-index has nothing to do with the outside world. Only z-index values with different values in the same cascading context can be compared.

How do I create a cascading context? See the cascading context MDN

Common ways to create a cascading context are:

  • Elements whose position is absolute or relative and whose Z-index is not auto;
  • Elements whose opacity property value is less than 1;
  • Flex (flexbox)/grid (grid) with z-index not auto;
  • Transform is not an element of None;