grammar

  • Position: the static | relative | absolute | fixed | center (CSS 3) | page (CSS 3) | sticky (CSS 3) | inherit

  • Default value: static

  • Suitable for: in addition to the display attribute is defined as the table – the column – group | table – all the elements of the column

  • Inheritance: none

  • Animativity: No

  • Calculated value: Specifies the value

  • Media: Visual

instructions

  • Static: Each element has a default position value, which is static, and the element will be embedded in the normal document flow. At this point, even though you set the left/right/top/bottom attributes for the element, none of them have any effect on the element.

  • Relative: 1) The object follows the general flow, and it will not affect any elements in the general flow when it is migrated according to its position in the general flow through the four positioning offset attributes of TOP, right, bottom and left; 2) Adding a relative attribute to an element without setting a location offset is equivalent to not setting anything, but it can be used as the parent of a child absolute element.

  • Absolute: 1) The object is out of the normal flow, i.e. the offset position of the box does not affect any elements in the normal flow; 2) At this time, the offset attribute refers to the locating ancestor element nearest to itself. If there is no locating ancestor element, it goes back to the body element. 3) Its margin does not fold with any other margin.

  • Fixed: 1) Consistent with absolute, but the offset positioning is based on the window as reference; 2) When a scroll bar appears, the object does not scroll along with it.

  • center: Same as absolute, but offset positioning is based on locating the center of the ancestor element. The box is centered vertically and horizontally in its containing container.

  • page: Consistent with Absolute. The contain block of an element in a paging medium or area block is always the initial contain block, otherwise it depends on each absolute mode.

  • sticky: Objects follow the normal flow when normal. It is like a combination of “relative” and “fixed”. When it is on the screen, it follows a regular flow and when it is rolled out of the screen, it behaves like “fixed”. This property represents the adsorption effect you see in reality.

  • Inherit: Position values do not cascade, so this value forces it to inherit position from its parent.

Document flow: Left to right, top to bottom, combined with the default placement of element blocks and inline attributes.

Interpretation of the

absolute

  1. One forabsoluteThere has always been a misconception:absoluteIs relative positioning, relative must have a comparative object, has been considered to be its nearestrelativeThe parent element, which I read today in a certain article, is actually wrong. The correct answer isabsoluteThe object of comparison is its most recent nonstaticThe parent element, that is, if the parent element isabsoluteorfixedPositioning, then, is also effective relative positioning of the parent element.
  2. If the position attribute of an element is set to absolute, the parent element will assume that the child element does not exist at all. As with uncleared floating elements, the parent element cannot be raised.

fixed

As mentioned earlier, fixed is very similar to absolute in that it helps you locate your elements anywhere in the document. However, fixed is not affected by scrollbars.