monks/position_area

The position-area CSS property enables an anchor-positioned element to be positioned relative to the edges of its associated anchor element by placing the positioned element on one or more tiles of an implicit 3x3 grid, where the anchoring element is the center cell.

position-area provides a convenient alternative to tethering and positioning an element relative to its anchor via {{glossary(“inset properties”)}} and the {{cssxref(“anchor()”)}} function. The grid-based concept solves the common use-case of positioning the edges of the positioned element’s containing block relative to the edges of its default anchor element.

If an element does not have a default anchor element, or is not an absolutely-positioned element, this property has no effect.

This property was originally named and supported in Chromium browsers as inset-area, with the same property values. Both property names will be supported for a short while, for backwards compatibility purposes.

Values

block_end

</>

pub const block_end: #(String, String)

block-end value of position-area

block_start

</>

pub const block_start: #(String, String)

block-start value of position-area

bottom

</>

pub const bottom: #(String, String)

bottom value of position-area

center

</>

pub const center: #(String, String)

center value of position-area

end

</>

pub const end: #(String, String)

end value of position-area

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

inline_end

</>

pub const inline_end: #(String, String)

inline-end value of position-area

inline_start

</>

pub const inline_start: #(String, String)

inline-start value of position-area

left

</>

pub const left: #(String, String)

left value of position-area

none

</>

pub const none: #(String, String)

: No position area is set.

raw

</>

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

Enter a raw string value for position-area

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

right

</>

pub const right: #(String, String)

right value of position-area

self_block_end

</>

pub const self_block_end: #(String, String)

self-block-end value of position-area

self_block_start

</>

pub const self_block_start: #(String, String)

self-block-start value of position-area

self_end

</>

pub const self_end: #(String, String)

self-end value of position-area

self_inline_end

</>

pub const self_inline_end: #(String, String)

self-inline-end value of position-area

self_inline_start

</>

pub const self_inline_start: #(String, String)

self-inline-start value of position-area

self_start

</>

pub const self_start: #(String, String)

self-start value of position-area

span_all

</>

pub const span_all: #(String, String)

span-all value of position-area

span_block_end

</>

pub const span_block_end: #(String, String)

span-block-end value of position-area

span_block_start

</>

pub const span_block_start: #(String, String)

span-block-start value of position-area

span_bottom

</>

pub const span_bottom: #(String, String)

span-bottom value of position-area

span_end

</>

pub const span_end: #(String, String)

span-end value of position-area

span_inline_end

</>

pub const span_inline_end: #(String, String)

span-inline-end value of position-area

span_inline_start

</>

pub const span_inline_start: #(String, String)

span-inline-start value of position-area

span_left

</>

pub const span_left: #(String, String)

span-left value of position-area

span_right

</>

pub const span_right: #(String, String)

span-right value of position-area

span_self_block_end

</>

pub const span_self_block_end: #(String, String)

span-self-block-end value of position-area

span_self_block_start

</>

pub const span_self_block_start: #(String, String)

span-self-block-start value of position-area

span_self_end

</>

pub const span_self_end: #(String, String)

span-self-end value of position-area

span_self_inline_end

</>

pub const span_self_inline_end: #(String, String)

span-self-inline-end value of position-area

span_self_inline_start

</>

pub const span_self_inline_start: #(String, String)

span-self-inline-start value of position-area

span_self_start

</>

pub const span_self_start: #(String, String)

span-self-start value of position-area

span_start

</>

pub const span_start: #(String, String)

span-start value of position-area

span_top

</>

pub const span_top: #(String, String)

span-top value of position-area

span_x_end

</>

pub const span_x_end: #(String, String)

span-x-end value of position-area

span_x_self_end

</>

pub const span_x_self_end: #(String, String)

span-x-self-end value of position-area

span_x_self_start

</>

pub const span_x_self_start: #(String, String)

span-x-self-start value of position-area

span_x_start

</>

pub const span_x_start: #(String, String)

span-x-start value of position-area

span_y_end

</>

pub const span_y_end: #(String, String)

span-y-end value of position-area

span_y_self_end

</>

pub const span_y_self_end: #(String, String)

span-y-self-end value of position-area

span_y_self_start

</>

pub const span_y_self_start: #(String, String)

span-y-self-start value of position-area

span_y_start

</>

pub const span_y_start: #(String, String)

span-y-start value of position-area

start

</>

pub const start: #(String, String)

start value of position-area

top

</>

pub const top: #(String, String)

top value of position-area

unset

</>

pub const unset: #(String, String)

var

</>

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

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

x_end

</>

pub const x_end: #(String, String)

x-end value of position-area

x_self_end

</>

pub const x_self_end: #(String, String)

x-self-end value of position-area

x_self_start

</>

pub const x_self_start: #(String, String)

x-self-start value of position-area

x_start

</>

pub const x_start: #(String, String)

x-start value of position-area

y_end

</>

pub const y_end: #(String, String)

y-end value of position-area

y_self_end

</>

pub const y_self_end: #(String, String)

y-self-end value of position-area

y_self_start

</>

pub const y_self_start: #(String, String)

y-self-start value of position-area

y_start

</>

pub const y_start: #(String, String)

y-start value of position-area