Skip to main content

Top / Right / Bottom / Left

Utilities for controlling the placement of positioned elements.

Table of classes#

Class
Properties
top-0
{"top":0}
-top-0
{"top":0}
top-1
{"top":4}
-top-1
{"top":-4}
top-2
{"top":8}
-top-2
{"top":-8}
top-3
{"top":12}
-top-3
{"top":-12}
top-4
{"top":16}
-top-4
{"top":-16}
top-5
{"top":20}
-top-5
{"top":-20}
top-6
{"top":24}
-top-6
{"top":-24}
top-7
{"top":28}
-top-7
{"top":-28}
top-8
{"top":32}
-top-8
{"top":-32}
top-9
{"top":36}
-top-9
{"top":-36}
top-10
{"top":40}
-top-10
{"top":-40}
top-11
{"top":44}
-top-11
{"top":-44}
top-12
{"top":48}
-top-12
{"top":-48}
top-14
{"top":56}
-top-14
{"top":-56}
top-16
{"top":64}
-top-16
{"top":-64}
top-20
{"top":80}
-top-20
{"top":-80}
top-24
{"top":96}
-top-24
{"top":-96}
top-28
{"top":112}
-top-28
{"top":-112}
top-32
{"top":128}
-top-32
{"top":-128}
top-36
{"top":144}
-top-36
{"top":-144}
top-40
{"top":160}
-top-40
{"top":-160}
top-44
{"top":176}
-top-44
{"top":-176}
top-48
{"top":192}
-top-48
{"top":-192}
top-52
{"top":208}
-top-52
{"top":-208}
top-56
{"top":224}
-top-56
{"top":-224}
top-60
{"top":240}
-top-60
{"top":-240}
top-64
{"top":256}
-top-64
{"top":-256}
top-72
{"top":288}
-top-72
{"top":-288}
top-80
{"top":320}
-top-80
{"top":-320}
top-96
{"top":384}
-top-96
{"top":-384}
top-0.25
{"top":1}
-top-0.25
{"top":-1}
top-0.5
{"top":2}
-top-0.5
{"top":-2}
top-1.5
{"top":6}
-top-1.5
{"top":-6}
top-2.5
{"top":10}
-top-2.5
{"top":-10}
top-3.5
{"top":14}
-top-3.5
{"top":-14}
top-1/2
{"top":"50%"}
-top-1/2
{"top":"-50%"}
top-1/3
{"top":"33.333333%"}
-top-1/3
{"top":"-33.333333%"}
top-2/3
{"top":"66,666667%"}
-top-2/3
{"top":"-66,666667%"}
top-1/4
{"top":"25%"}
-top-1/4
{"top":"-25%"}
top-2/4
{"top":"50%"}
-top-2/4
{"top":"-50%"}
top-3/4
{"top":"75%"}
-top-3/4
{"top":"-75%"}
top-1/5
{"top":"20%"}
-top-1/5
{"top":"-20%"}
top-2/5
{"top":"40%"}
-top-2/5
{"top":"-40%"}
top-3/5
{"top":"60%"}
-top-3/5
{"top":"-60%"}
top-4/5
{"top":"80%"}
-top-4/5
{"top":"-80%"}
top-1/6
{"top":"16.666667%"}
-top-1/6
{"top":"-16.666667%"}
top-2/6
{"top":"33.333333%"}
-top-2/6
{"top":"-33.333333%"}
top-3/6
{"top":"50%"}
-top-3/6
{"top":"-50%"}
top-4/6
{"top":"66,666667%"}
-top-4/6
{"top":"-66,666667%"}
top-5/6
{"top":"83.333333%"}
-top-5/6
{"top":"-83.333333%"}
top-1/12
{"top":"8.333333%"}
-top-1/12
{"top":"-8.333333%"}
top-2/12
{"top":"16.666667%"}
-top-2/12
{"top":"-16.666667%"}
top-3/12
{"top":"25%"}
-top-3/12
{"top":"-25%"}
top-4/12
{"top":"33.333333%"}
-top-4/12
{"top":"-33.333333%"}
top-5/12
{"top":"41.666667%"}
-top-5/12
{"top":"-41.666667%"}
top-6/12
{"top":"50%"}
-top-6/12
{"top":"-50%"}
top-7/12
{"top":"58.333333%"}
-top-7/12
{"top":"-58.333333%"}
top-8/12
{"top":"66.666667%"}
-top-8/12
{"top":"-66.666667%"}
top-9/12
{"top":"75%"}
-top-9/12
{"top":"-75%"}
top-10/12
{"top":"83.333333%"}
-top-10/12
{"top":"-83.333333%"}
top-11/12
{"top":"91.666667%"}
-top-11/12
{"top":"-91.666667%"}
top-full
{"top":"100%"}
-top-full
{"top":"-100%"}
bottom-0
{"bottom":0}
-bottom-0
{"bottom":0}
bottom-1
{"bottom":4}
-bottom-1
{"bottom":-4}
bottom-2
{"bottom":8}
-bottom-2
{"bottom":-8}
bottom-3
{"bottom":12}
-bottom-3
{"bottom":-12}
bottom-4
{"bottom":16}
-bottom-4
{"bottom":-16}
bottom-5
{"bottom":20}
-bottom-5
{"bottom":-20}
bottom-6
{"bottom":24}
-bottom-6
{"bottom":-24}
bottom-7
{"bottom":28}
-bottom-7
{"bottom":-28}
bottom-8
{"bottom":32}
-bottom-8
{"bottom":-32}
bottom-9
{"bottom":36}
-bottom-9
{"bottom":-36}
bottom-10
{"bottom":40}
-bottom-10
{"bottom":-40}
bottom-11
{"bottom":44}
-bottom-11
{"bottom":-44}
bottom-12
{"bottom":48}
-bottom-12
{"bottom":-48}
bottom-14
{"bottom":56}
-bottom-14
{"bottom":-56}
bottom-16
{"bottom":64}
-bottom-16
{"bottom":-64}
bottom-20
{"bottom":80}
-bottom-20
{"bottom":-80}
bottom-24
{"bottom":96}
-bottom-24
{"bottom":-96}
bottom-28
{"bottom":112}
-bottom-28
{"bottom":-112}
bottom-32
{"bottom":128}
-bottom-32
{"bottom":-128}
bottom-36
{"bottom":144}
-bottom-36
{"bottom":-144}
bottom-40
{"bottom":160}
-bottom-40
{"bottom":-160}
bottom-44
{"bottom":176}
-bottom-44
{"bottom":-176}
bottom-48
{"bottom":192}
-bottom-48
{"bottom":-192}
bottom-52
{"bottom":208}
-bottom-52
{"bottom":-208}
bottom-56
{"bottom":224}
-bottom-56
{"bottom":-224}
bottom-60
{"bottom":240}
-bottom-60
{"bottom":-240}
bottom-64
{"bottom":256}
-bottom-64
{"bottom":-256}
bottom-72
{"bottom":288}
-bottom-72
{"bottom":-288}
bottom-80
{"bottom":320}
-bottom-80
{"bottom":-320}
bottom-96
{"bottom":384}
-bottom-96
{"bottom":-384}
bottom-0.25
{"bottom":1}
-bottom-0.25
{"bottom":-1}
bottom-0.5
{"bottom":2}
-bottom-0.5
{"bottom":-2}
bottom-1.5
{"bottom":6}
-bottom-1.5
{"bottom":-6}
bottom-2.5
{"bottom":10}
-bottom-2.5
{"bottom":-10}
bottom-3.5
{"bottom":14}
-bottom-3.5
{"bottom":-14}
bottom-1/2
{"bottom":"50%"}
-bottom-1/2
{"bottom":"-50%"}
bottom-1/3
{"bottom":"33.333333%"}
-bottom-1/3
{"bottom":"-33.333333%"}
bottom-2/3
{"bottom":"66,666667%"}
-bottom-2/3
{"bottom":"-66,666667%"}
bottom-1/4
{"bottom":"25%"}
-bottom-1/4
{"bottom":"-25%"}
bottom-2/4
{"bottom":"50%"}
-bottom-2/4
{"bottom":"-50%"}
bottom-3/4
{"bottom":"75%"}
-bottom-3/4
{"bottom":"-75%"}
bottom-1/5
{"bottom":"20%"}
-bottom-1/5
{"bottom":"-20%"}
bottom-2/5
{"bottom":"40%"}
-bottom-2/5
{"bottom":"-40%"}
bottom-3/5
{"bottom":"60%"}
-bottom-3/5
{"bottom":"-60%"}
bottom-4/5
{"bottom":"80%"}
-bottom-4/5
{"bottom":"-80%"}
bottom-1/6
{"bottom":"16.666667%"}
-bottom-1/6
{"bottom":"-16.666667%"}
bottom-2/6
{"bottom":"33.333333%"}
-bottom-2/6
{"bottom":"-33.333333%"}
bottom-3/6
{"bottom":"50%"}
-bottom-3/6
{"bottom":"-50%"}
bottom-4/6
{"bottom":"66,666667%"}
-bottom-4/6
{"bottom":"-66,666667%"}
bottom-5/6
{"bottom":"83.333333%"}
-bottom-5/6
{"bottom":"-83.333333%"}
bottom-1/12
{"bottom":"8.333333%"}
-bottom-1/12
{"bottom":"-8.333333%"}
bottom-2/12
{"bottom":"16.666667%"}
-bottom-2/12
{"bottom":"-16.666667%"}
bottom-3/12
{"bottom":"25%"}
-bottom-3/12
{"bottom":"-25%"}
bottom-4/12
{"bottom":"33.333333%"}
-bottom-4/12
{"bottom":"-33.333333%"}
bottom-5/12
{"bottom":"41.666667%"}
-bottom-5/12
{"bottom":"-41.666667%"}
bottom-6/12
{"bottom":"50%"}
-bottom-6/12
{"bottom":"-50%"}
bottom-7/12
{"bottom":"58.333333%"}
-bottom-7/12
{"bottom":"-58.333333%"}
bottom-8/12
{"bottom":"66.666667%"}
-bottom-8/12
{"bottom":"-66.666667%"}
bottom-9/12
{"bottom":"75%"}
-bottom-9/12
{"bottom":"-75%"}
bottom-10/12
{"bottom":"83.333333%"}
-bottom-10/12
{"bottom":"-83.333333%"}
bottom-11/12
{"bottom":"91.666667%"}
-bottom-11/12
{"bottom":"-91.666667%"}
bottom-full
{"bottom":"100%"}
-bottom-full
{"bottom":"-100%"}
left-0
{"left":0}
-left-0
{"left":0}
left-1
{"left":4}
-left-1
{"left":-4}
left-2
{"left":8}
-left-2
{"left":-8}
left-3
{"left":12}
-left-3
{"left":-12}
left-4
{"left":16}
-left-4
{"left":-16}
left-5
{"left":20}
-left-5
{"left":-20}
left-6
{"left":24}
-left-6
{"left":-24}
left-7
{"left":28}
-left-7
{"left":-28}
left-8
{"left":32}
-left-8
{"left":-32}
left-9
{"left":36}
-left-9
{"left":-36}
left-10
{"left":40}
-left-10
{"left":-40}
left-11
{"left":44}
-left-11
{"left":-44}
left-12
{"left":48}
-left-12
{"left":-48}
left-14
{"left":56}
-left-14
{"left":-56}
left-16
{"left":64}
-left-16
{"left":-64}
left-20
{"left":80}
-left-20
{"left":-80}
left-24
{"left":96}
-left-24
{"left":-96}
left-28
{"left":112}
-left-28
{"left":-112}
left-32
{"left":128}
-left-32
{"left":-128}
left-36
{"left":144}
-left-36
{"left":-144}
left-40
{"left":160}
-left-40
{"left":-160}
left-44
{"left":176}
-left-44
{"left":-176}
left-48
{"left":192}
-left-48
{"left":-192}
left-52
{"left":208}
-left-52
{"left":-208}
left-56
{"left":224}
-left-56
{"left":-224}
left-60
{"left":240}
-left-60
{"left":-240}
left-64
{"left":256}
-left-64
{"left":-256}
left-72
{"left":288}
-left-72
{"left":-288}
left-80
{"left":320}
-left-80
{"left":-320}
left-96
{"left":384}
-left-96
{"left":-384}
left-0.25
{"left":1}
-left-0.25
{"left":-1}
left-0.5
{"left":2}
-left-0.5
{"left":-2}
left-1.5
{"left":6}
-left-1.5
{"left":-6}
left-2.5
{"left":10}
-left-2.5
{"left":-10}
left-3.5
{"left":14}
-left-3.5
{"left":-14}
left-1/2
{"left":"50%"}
-left-1/2
{"left":"-50%"}
left-1/3
{"left":"33.333333%"}
-left-1/3
{"left":"-33.333333%"}
left-2/3
{"left":"66,666667%"}
-left-2/3
{"left":"-66,666667%"}
left-1/4
{"left":"25%"}
-left-1/4
{"left":"-25%"}
left-2/4
{"left":"50%"}
-left-2/4
{"left":"-50%"}
left-3/4
{"left":"75%"}
-left-3/4
{"left":"-75%"}
left-1/5
{"left":"20%"}
-left-1/5
{"left":"-20%"}
left-2/5
{"left":"40%"}
-left-2/5
{"left":"-40%"}
left-3/5
{"left":"60%"}
-left-3/5
{"left":"-60%"}
left-4/5
{"left":"80%"}
-left-4/5
{"left":"-80%"}
left-1/6
{"left":"16.666667%"}
-left-1/6
{"left":"-16.666667%"}
left-2/6
{"left":"33.333333%"}
-left-2/6
{"left":"-33.333333%"}
left-3/6
{"left":"50%"}
-left-3/6
{"left":"-50%"}
left-4/6
{"left":"66,666667%"}
-left-4/6
{"left":"-66,666667%"}
left-5/6
{"left":"83.333333%"}
-left-5/6
{"left":"-83.333333%"}
left-1/12
{"left":"8.333333%"}
-left-1/12
{"left":"-8.333333%"}
left-2/12
{"left":"16.666667%"}
-left-2/12
{"left":"-16.666667%"}
left-3/12
{"left":"25%"}
-left-3/12
{"left":"-25%"}
left-4/12
{"left":"33.333333%"}
-left-4/12
{"left":"-33.333333%"}
left-5/12
{"left":"41.666667%"}
-left-5/12
{"left":"-41.666667%"}
left-6/12
{"left":"50%"}
-left-6/12
{"left":"-50%"}
left-7/12
{"left":"58.333333%"}
-left-7/12
{"left":"-58.333333%"}
left-8/12
{"left":"66.666667%"}
-left-8/12
{"left":"-66.666667%"}
left-9/12
{"left":"75%"}
-left-9/12
{"left":"-75%"}
left-10/12
{"left":"83.333333%"}
-left-10/12
{"left":"-83.333333%"}
left-11/12
{"left":"91.666667%"}
-left-11/12
{"left":"-91.666667%"}
left-full
{"left":"100%"}
-left-full
{"left":"-100%"}
right-0
{"right":0}
-right-0
{"right":0}
right-1
{"right":4}
-right-1
{"right":-4}
right-2
{"right":8}
-right-2
{"right":-8}
right-3
{"right":12}
-right-3
{"right":-12}
right-4
{"right":16}
-right-4
{"right":-16}
right-5
{"right":20}
-right-5
{"right":-20}
right-6
{"right":24}
-right-6
{"right":-24}
right-7
{"right":28}
-right-7
{"right":-28}
right-8
{"right":32}
-right-8
{"right":-32}
right-9
{"right":36}
-right-9
{"right":-36}
right-10
{"right":40}
-right-10
{"right":-40}
right-11
{"right":44}
-right-11
{"right":-44}
right-12
{"right":48}
-right-12
{"right":-48}
right-14
{"right":56}
-right-14
{"right":-56}
right-16
{"right":64}
-right-16
{"right":-64}
right-20
{"right":80}
-right-20
{"right":-80}
right-24
{"right":96}
-right-24
{"right":-96}
right-28
{"right":112}
-right-28
{"right":-112}
right-32
{"right":128}
-right-32
{"right":-128}
right-36
{"right":144}
-right-36
{"right":-144}
right-40
{"right":160}
-right-40
{"right":-160}
right-44
{"right":176}
-right-44
{"right":-176}
right-48
{"right":192}
-right-48
{"right":-192}
right-52
{"right":208}
-right-52
{"right":-208}
right-56
{"right":224}
-right-56
{"right":-224}
right-60
{"right":240}
-right-60
{"right":-240}
right-64
{"right":256}
-right-64
{"right":-256}
right-72
{"right":288}
-right-72
{"right":-288}
right-80
{"right":320}
-right-80
{"right":-320}
right-96
{"right":384}
-right-96
{"right":-384}
right-0.25
{"right":1}
-right-0.25
{"right":-1}
right-0.5
{"right":2}
-right-0.5
{"right":-2}
right-1.5
{"right":6}
-right-1.5
{"right":-6}
right-2.5
{"right":10}
-right-2.5
{"right":-10}
right-3.5
{"right":14}
-right-3.5
{"right":-14}
right-1/2
{"right":"50%"}
-right-1/2
{"right":"-50%"}
right-1/3
{"right":"33.333333%"}
-right-1/3
{"right":"-33.333333%"}
right-2/3
{"right":"66,666667%"}
-right-2/3
{"right":"-66,666667%"}
right-1/4
{"right":"25%"}
-right-1/4
{"right":"-25%"}
right-2/4
{"right":"50%"}
-right-2/4
{"right":"-50%"}
right-3/4
{"right":"75%"}
-right-3/4
{"right":"-75%"}
right-1/5
{"right":"20%"}
-right-1/5
{"right":"-20%"}
right-2/5
{"right":"40%"}
-right-2/5
{"right":"-40%"}
right-3/5
{"right":"60%"}
-right-3/5
{"right":"-60%"}
right-4/5
{"right":"80%"}
-right-4/5
{"right":"-80%"}
right-1/6
{"right":"16.666667%"}
-right-1/6
{"right":"-16.666667%"}
right-2/6
{"right":"33.333333%"}
-right-2/6
{"right":"-33.333333%"}
right-3/6
{"right":"50%"}
-right-3/6
{"right":"-50%"}
right-4/6
{"right":"66,666667%"}
-right-4/6
{"right":"-66,666667%"}
right-5/6
{"right":"83.333333%"}
-right-5/6
{"right":"-83.333333%"}
right-1/12
{"right":"8.333333%"}
-right-1/12
{"right":"-8.333333%"}
right-2/12
{"right":"16.666667%"}
-right-2/12
{"right":"-16.666667%"}
right-3/12
{"right":"25%"}
-right-3/12
{"right":"-25%"}
right-4/12
{"right":"33.333333%"}
-right-4/12
{"right":"-33.333333%"}
right-5/12
{"right":"41.666667%"}
-right-5/12
{"right":"-41.666667%"}
right-6/12
{"right":"50%"}
-right-6/12
{"right":"-50%"}
right-7/12
{"right":"58.333333%"}
-right-7/12
{"right":"-58.333333%"}
right-8/12
{"right":"66.666667%"}
-right-8/12
{"right":"-66.666667%"}
right-9/12
{"right":"75%"}
-right-9/12
{"right":"-75%"}
right-10/12
{"right":"83.333333%"}
-right-10/12
{"right":"-83.333333%"}
right-11/12
{"right":"91.666667%"}
-right-11/12
{"right":"-91.666667%"}
right-full
{"right":"100%"}
-right-full
{"right":"-100%"}