Top / Right / Bottom / Left

Atomic props for controlling the placement of positioned elements.

Atomic PropsCSS 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.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Right#

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Bottom#

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Left#

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Negative values#

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

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO