Basic types of CSS Positions

The position attribute is used to specify the position of an element on a web page. There are five ways to position an element.

1. Static (default)

  • Static is the default value for the position property. If you omit the position attribute, the browser assumes that the element is static.
  • In this case, the browser will determine the location of each element according to the source order, which is called “normal flow.” Each block-level element occupies its own block, and there is no overlap between elements. This position is the default position of the element.
  • This keyword specifies the normal layout behavior of the element, that is, the current layout position of the element in the general flow of the document. The top, right, bottom, left, and Z-index attributes are invalid;

2. Relative position

  • Relative positioning is to move relative to one’s previous position in the standard flow (static position); itMust beIt is used with the top, bottom, left, and right attributes to specify the direction and distance of the offset.

Note:

  • Because the relative positioning isDo not deviate from the standard flowIs, so is in relative positioningDistinguish betweenBlock-level elements/inline elements/inline block-level elements
  • Since relative positioning does not deviate from the standard flow, and relative positioning elements occupy positions in the standard flow, setting margin/padding and other attributes for relative positioning elements will affect the layout of the standard flow

Application Scenarios:

  • 1 Is used to fine-tune elements
  • 2. Use it in conjunction with the absolute positioning learned later

3. Absolute position

The absolute position element holds the nearest ancestor element whose position attribute is not static, or, if neither, relative to the body.

Note:

  • 1. Deviating from standard flow

  • 2. Relative positioning and absolute positioning coordination left: 0; right: 0; top: 0; bottom: 0; use

Rule:

  • 1. If an absolutely located element has an ancestor element, and the ancestor element is also a location flow, and multiple elements in the ancestor element are location flows, then the absolutely located element takes the ancestor element of the nearest location flow as its reference point;

  • 2. If an absolutely positioned element uses the body as its reference point, then the width and height of the first screen of the page are used as the reference point, not the width and height of the entire page.

  • 3. An absolutely positioned element ignores the padding of the ancestor element;

  • 4. By default, absolute positioned elements use the body as a reference point, so they vary with the width and height of the browser

  • 5. Child absolute parent phase: The child element is positioned in absolute terms and the parent element in relative terms

** How do I center absolutely positioned elements horizontally? ** You only need to set the left of the absolute positioning element :50%; Then set the absolute positioning element’s margin-left: – half the width of the element px;

4. Fix the positioning(fixed)

  • Fixed positioning and the previous learning background association way is very similar, background positioning can make the background pictureDoes not scroll with the scroll barAnd fixed positioning can make a boxDoes not scroll with the scroll bar;
  • Phi is relative to phiviewport(ViewPort, browser window) is offset, that is, the positioning point is the browser window. This results in the element’s position not changing as the page scrolls, as if it were fixed to the page.
  • When used with the top, bottom, left, and right attributes, it indicates that the initial position of the element is based onviewportComputed, otherwise the initial position is the element’s default position.

Note:

Fixed positioned elements are detached from the standard flow and do not occupy space in the standard flow, so there is no distinction between in-line/block-level/in-line block level.

5. Sticky (sticky)

  • Elements can be fixed to the location specified on the page, but are not always fixed there.

  • The positioning position can be set using the top, bottom, left, and right attributes, but this position is a threshold value, meaning that the element will not be fixed until it reaches this threshold.

  • Different from the previous four attribute values, it will produce a dynamic fixed effect, much like the combination of “relative” and “fixed” : in some cases, it is “relative” (” base point “is its default position), and in other cases, it automatically becomes” fixed “(” base point” is the viewport).

  • If sticky is effective, it must be used with top, bottom, left and right attributes. Otherwise, it is equivalent to relative positioning and does not produce the effect of “dynamic fixation”. The reason is that these four attributes are used to define “offset distance”, which browsers treat as the threshold for sticky to take effect. Its specific rules are that, when the page scrolls, the parent element begins to separate from the viewport (that is, part of the invisible), as long as the distance between the sticky element and the effective threshold, relative positioning automatically switch to fixed positioning; When the parent element is completely out of the viewport (that is, completely invisible), the fixed position automatically switches back to the relative position.

  • When the page scrolls down, the toolbar becomes a fixed position at the head of the page. When the page scrolls up again, the toolbar returns to its default position.

6. Z-index attribute (locate element visibility)

  • The z-index attribute is specifically used to control the coverage relationship of location flow elements. By default, all elements have a default z-index attribute of 0.

Note:

    • 1. By default, elements of the location stream override elements of the standard stream;
    • 2. By default, the element written after the location stream overwrites the element written before it
    • 3. If the element of the location stream has z-index attribute set, the element whose Z-index attribute is larger will be displayed above.

Fathering:

  • 1.1 If neither parent element has the Z-index attribute set, the child element whose Z-index attribute is larger will be displayed above
  • 1.2 If the parent element of both elements has z-index set, thenThe z-index attribute of the child element is invalidatedThat is, the parent element whose Z-index attribute is larger will be displayed above;

7. Cascading context

  • Stacking context, a three-dimensional concept in HTML, equivalent to the Z-axis, is used for controlThe stackThe display priority order of the element.
  • If an element has a cascading context (i.e., it is a cascading context element), we can understand that the element is “superior” on the Z-axis, which ultimately means that it is closer to the viewer on the screen.
Cascading order:
  • “Stacking order” indicates that elements are stacked vertically on the Z axis in accordance with a specific order rule. Thus, the “cascading context” and “cascading hierarchy” mentioned above are concepts, and the “cascading order” here is a rule.
The z-axis arrangement of the same stack context elements:

Background or border < Z-index negative < block-level element < floating element < in-line, in-line block element < position Z-index :auto/0 < position Z-index positive

  • The following are listed in order from smallest to largest:

    • The background and border of the element that creates the push context
    • The stack context whose z-index (stack level) is negative
    • Regular flow non – positioned block box
    • Non-positioning floating box
    • Regular stream non – positioned row box
    • Any positioning child element where z-index is auto, and stack context where z-index is 0
    • A stack context with a positive stack rating