monks/position

The position CSS property sets how an element is positioned in a document. The {{Cssxref(“top”)}}, {{Cssxref(“right”)}}, {{Cssxref(“bottom”)}}, and {{Cssxref(“left”)}} physical properties and the {{cssxref(“inset-block-start”)}}, {{cssxref(“inset-block-end”)}}, {{cssxref(“inset-inline-start”)}}, and {{cssxref(“inset-inline-end”)}} flow-relative logical properties can be used to determine the final location of positioned elements.

Values

absolute

</>

pub const absolute: #(String, String)

: The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

fixed

</>

pub const fixed: #(String, String)

: The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

raw

</>

pub fn raw(value: String) -> #(String, String)

Enter a raw string value for position

relative

</>

pub const relative: #(String, String)

: The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

static

</>

pub const static: #(String, String)

: The element is positioned according to the Normal Flow of the document. The {{cssxref(“top”)}}, {{cssxref(“right”)}}, {{cssxref(“bottom”)}}, {{cssxref(“left”)}}, and {{cssxref(“z-index”)}} properties have no effect. This is the default value.

sticky

</>

pub const sticky: #(String, String)

: The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor. > [!NOTE] > At least one inset property ({{cssxref(“top”)}}, {{cssxref(“inset-block-start”)}}, {{cssxref(“right”)}}, {{cssxref(“inset-inline-end”)}}, etc.) needs to be set to a non-auto value for the axis on which the element needs to be made sticky. If both inset properties for an axis are set to auto, on that axis the sticky value will behave as relative.

unset

</>

pub const unset: #(String, String)

var

</>

pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for position. It will be wrapped in var() and have -- prepended.