Position

Atomic props for controlling how an element is positioned.

Atomic Props	CSS Properties
static	position: static;
fixed	position: fixed;
absolute	position: absolute;
relative	position: relative;
sticky	position: sticky;
position={value}	position: {value};

Static

Use static props to set static position for an element.

Result

Loading...

Live Editor

<Box relative square-160 bgBlue100> <Box bgOrange400 square-100 static toCenter> static </Box> </Box>

<Box relative square-160 bgBlue100>
  <Box bgOrange400 square-100 static toCenter>
    static
  </Box>
</Box>

Relative

Use relative props to set relative position for an element.

Result

Loading...

Live Editor

<Box relative square-160 bgBlue100> relative <Box bgBlue400--T20 square-80 absolute bottom-0 toCenter> absolute </Box> </Box>

<Box relative square-160 bgBlue100>
  relative
  <Box bgBlue400--T20 square-80 absolute bottom-0 toCenter>
    absolute
  </Box>
</Box>

Absolute

Use absolute props to set absolute position for an element.

Result

Loading...

Live Editor

<Box relative square-160 bgBlue100> <Box bgBlue400--T20 square-80 absolute bottom-0 toCenter> absolute </Box> </Box>

<Box relative square-160 bgBlue100>
  <Box bgBlue400--T20 square-80 absolute bottom-0 toCenter>
    absolute
  </Box>
</Box>

Fixed

Use fixed props to set fixed position for an element.

Result

Loading...

Live Editor

<Box toCenter bgGreen300 shadow rounded-8 square-80 fixed bottom-10 zIndex-10000> fixed </Box>

<Box toCenter bgGreen300 shadow rounded-8 square-80 fixed bottom-10 zIndex-10000>
  fixed
</Box>

Sticky

Use sticky props to set sticky position for an element.

Result

Loading...

Live Editor

<Box relative square-160 overflow="auto" bgGray100 p4> <Box>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Box> <Box toCenter bgYellow200 shadow rounded-8 square-80 sticky top-0> sticky </Box> <Box> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum. </Box> </Box>

<Box relative square-160 overflow="auto" bgGray100 p4>
  <Box>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</Box>
  <Box toCenter bgYellow200 shadow rounded-8 square-80 sticky top-0>
    sticky
  </Box>
  <Box>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a
    libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum
    quae eum fugit earum.
  </Box>
</Box>

Position

if the preset atomic props can not be satisfied，you can use position props.

Result

Loading...

Live Editor

<Box toCenter rounded-8 square-80 position={2 > 1 ? 'absolute' : 'relative'}> position </Box>

<Box toCenter rounded-8 square-80 position={2 > 1 ? 'absolute' : 'relative'}>
  position
</Box>