CSS position (positioning)

A positional element (positioned elements) is an element whose computed position property is relative , absolute or, fixed  or sticky .

relative positioning Element ( relatively positioned element ) is relative the element after which the position property is computed.

An absolutely positioned element (absolutely positioned elements) is a post-calculated position attribute absolute or fixed element.

Sticky positioning Elements ( stickily positioned element ) is sticky the element after which the position property is computed.

top, right , bottom , and left properties determine the location of the positioned element. However, these properties do not work unless the Position property is set first. They also have different ways of working, depending on the location method.

Positioning method: Static positioning, fixed positioning, relative positioning, absolute positioning, sticky positioning.

Grammar

/**/position:static;position:relative;position:absolute;position:fixed;position: sticky;//sticky  /**/position:inherit;position:initial;position: unset;

Take value

static：The keyword specifies that the element uses normal layout behavior, which is the current layout position of the element in the document flow . At this point,,, top right and the property is bottom left z-index  not valid.

relative：Under this keyword, the element is placed first when no positioning is added, and the position of the element is adjusted without changing the layout of the page (thus leaving a blank space where the element is not added). Position:relative does not define the effects applied to Table-*-group, Table-row, Table-column, Table-cell, table-caption elements.

absolute：No space is reserved for the element, and the element position is determined by specifying the offset of the element relative to the nearest non-static positional ancestor element. An absolutely positioned element can set margins (margins) and will not be merged with other margins.

fixed: does not reserve space for an element, but specifies the element position by specifying the position of the element relative to the screen viewport (viewport). The position of the element does not change when the screen scrolls. When you print, the elements appear in a fixed position on each page. fixedproperty creates a new stack context. When the attribute of an element ancestor is transform not none , the container is changed from the viewport to that ancestor.

sticky: The box position is calculated from the normal flow (this is known as the position in normal flow) and then positioned relative to the flow root (BFC) and containing block (the nearest block-level ancestor element) of the element in the stream. In all cases (even if the positioned element is table 时 ), the element's positioning is not affected by subsequent elements. When element b is positioned as sticky, the position of the subsequent element is determined by the position where B is not positioned. position: sticky 对 table 元素的效果与 position: relative 相同。

In layman's terms:

static positioning : The default value of the HTML element, that is, no positioning , and the element appears in the normal stream. Statically positioned elements are unaffected by top, bottom, left, and right.

relative relative positioning: The position of the relative locating element is relative to its normal position . The content of the relative positioned elements that can be moved and the elements that overlap each other does not change the space it originally occupies.

Fixed fix positioning : The position of the element is fixed relative to the browser window, and it does not move even if the window is scrolled. Fixed positioning makes the position of an element independent of the document flow and therefore does not occupy space. Fixed positioned elements overlap with other elements.

Absolute Absolute Positioning : The position of an absolutely positioned element is relative to the nearest positioned parent element, if the element has no positioned parent element, then its position is relative to

Sticky viscous positioning: Viscous positioning is a mixture of relative positioning and fixed positioning. The element is relative positioned before crossing a specific threshold, and then anchored. For example:

{ position: sticky; top: 10px; }

The element is relative positioned before the viewport viewport scrolls to the element top distance less than 10px. After that, the element is fixed to a position 10px from the top until the viewport viewport is rolled back to the threshold value.

Sticky positioning is often used to locate the head element of an alphabetical list. The head element that marks the beginning of part B is always under a when scrolling part A. When you start rolling part B, the head of B is pinned to the top of the screen until all B items are scrolled and replaced by the head of C.

Must be specified, top right or one of the bottom left four thresholds, for the sticky positioning to take effect. Otherwise, the behavior is the same as relative positioning.

Annotations

For relative positioning elements, top and bottom properties specify a vertical offset from its normal position, left and the right property specifies a horizontal offset.

For absolutely positioned elements,,, top right bottom and left attributes specify the offset of the element relative to its containing block, that is, the position is relative to the containing block. The margin (margin) of the element is positioned within these offsets.

Most of the time, the values of the and attributes of the absolutely positioned elements are height width auto calculated automatically to fit the content of the element. However, the non-replacement (non-replaced) absolute positioning element can occupy the top bottom free space specified by the value (in addition to the outside) of the and auto not necessarily set height (that is, set it to auto ). left, right and width similar.

Workaround when the positional value of an absolutely positioned element conflicts:

• If both top are specified and bottom (not auto ), take precedence top .
• If the same is specified left and right , if direction ltr (English, Chinese, etc.), preferred, left if direction rtl (Arabic, Hebrew, etc.), preferred right .

Overlapping elements

Elements are positioned independently of the document flow, so they can overwrite other elements on the page

The Z-index property specifies the stacking order of an element (which element should be placed before, or later), and an element can have a stacked order of positive or negative numbers. Elements that have a higher stacking order are always preceded by lower stacking order elements.

Note: if two anchor elements overlap, no z-index is specified, and the last element positioned in the HTML code will be displayed at the front.

Reference Address:

• Mdn:position: Learn the basics of CSS position properties
• Rookie Tutorial Css-positioning
• W3SCHOOLCSS Positioning (positioning)

CSS position (positioning)