Top / Right / Bottom / Left

Atomic props for controlling the placement of positioned elements.

Atomic Props	CSS Properties
top-{value} / top={value}	top={value}
right-{value} / right={value}	right={value}
bottom-{value} / bottom={value}	bottom={value}
left-{value} / left={value}	left={value}

Top

Use top props to set an element's top position.

Result

Loading...

Live Editor

<Box relative square-160 bgOrange100> <Box bgOrange400 square-80 absolute top-20></Box> </Box>

<Box relative square-160 bgOrange100>
  <Box bgOrange400 square-80 absolute top-20></Box>
</Box>

Right

Use right props to set an element's right position.

Result

Loading...

Live Editor

<Box relative square-160 bgOrange100> <Box bgOrange400 square-80 absolute right={20}></Box> </Box>

<Box relative square-160 bgOrange100>
  <Box bgOrange400 square-80 absolute right={20}></Box>
</Box>

Bottom

Use bottom props to set an element's bottom position.

Result

Loading...

Live Editor

<Box relative square-160 bgOrange100> <Box bgOrange400 square-80 absolute bottom="20%"></Box> </Box>

<Box relative square-160 bgOrange100>
  <Box bgOrange400 square-80 absolute bottom="20%"></Box>
</Box>

Left

Use left props to set an element's left position.

Result

Loading...

Live Editor

<Box relative square-160 bgOrange100> <Box bgOrange400 square-80 absolute left-20></Box> </Box>

<Box relative square-160 bgOrange100>
  <Box bgOrange400 square-80 absolute left-20></Box>
</Box>

Negative values

Use right--{value} like props to set an element's Negative position.

Result

Loading...

Live Editor

<Box relative square-160 bgOrange100> <Box bgOrange400 square-80 absolute top-20 right--20></Box> </Box>

<Box relative square-160 bgOrange100>
  <Box bgOrange400 square-80 absolute top-20 right--20></Box>
</Box>