Top

Set the top placement of positioned elements.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

t-0
top: 0;
t-1
top: .25rem;
t-2
top: .5rem;
t-3
top: .75rem;
t-4
top: 1rem;
t-5
top: 1.25rem;
t-6
top: 1.5rem;
t-7
top: 1.75rem;
t-8
top: 2rem;
t-9
top: 2.25rem;
t-10
top: 2.5rem;
t-11
top: 2.75rem;
t-12
top: 3rem;
t-13
top: 3.25rem;
t-14
top: 3.5rem;
t-15
top: 3.75rem;
t-16
top: 4rem;
t-17
top: 4.25rem;
t-18
top: 4.5rem;
t-19
top: 4.75rem;
t-20
top: 5rem;
t-21
top: 5.25rem;
t-22
top: 5.5rem;
t-23
top: 5.75rem;
t-24
top: 6rem;
t-25
top: 6.25rem;
t-26
top: 6.5rem;
t-27
top: 6.75rem;
t-28
top: 7rem;
t-29
top: 7.25rem;
t-30
top: 7.5rem;
t-31
top: 7.75rem;
t-32
top: 8rem;
t-33
top: 8.25rem;
t-34
top: 8.5rem;
t-35
top: 8.75rem;
t-36
top: 9rem;
t-37
top: 9.25rem;
t-38
top: 9.5rem;
t-39
top: 9.75rem;
t-40
top: 10rem;
t-41
top: 10.25rem;
t-42
top: 10.5rem;
t-43
top: 10.75rem;
t-44
top: 11rem;
t-45
top: 11.25rem;
t-46
top: 11.5rem;
t-47
top: 11.75rem;
t-48
top: 12rem;
t-49
top: 12.25rem;
t-50
top: 12.5rem;
t-51
top: 12.75rem;
t-52
top: 13rem;
t-53
top: 13.25rem;
t-54
top: 13.5rem;
t-55
top: 13.75rem;
t-56
top: 14rem;
t-57
top: 14.25rem;
t-58
top: 14.5rem;
t-59
top: 14.75rem;
t-60
top: 15rem;
t-61
top: 15.25rem;
t-62
top: 15.5rem;
t-63
top: 15.75rem;
t-64
top: 16rem;
t-65
top: 16.25rem;
t-66
top: 16.5rem;
t-67
top: 16.75rem;
t-68
top: 17rem;
t-69
top: 17.25rem;
t-70
top: 17.5rem;
t-71
top: 17.75rem;
t-72
top: 18rem;
t-73
top: 18.25rem;
t-74
top: 18.5rem;
t-75
top: 18.75rem;
t-76
top: 19rem;
t-77
top: 19.25rem;
t-78
top: 19.5rem;
t-79
top: 19.75rem;
t-80
top: 20rem;
t-81
top: 20.25rem;
t-82
top: 20.5rem;
t-83
top: 20.75rem;
t-84
top: 21rem;
t-85
top: 21.25rem;
t-86
top: 21.5rem;
t-87
top: 21.75rem;
t-88
top: 22rem;
t-89
top: 22.25rem;
t-90
top: 22.5rem;
t-91
top: 22.75rem;
t-92
top: 23rem;
t-93
top: 23.25rem;
t-94
top: 23.5rem;
t-95
top: 23.75rem;
t-96
top: 24rem;
t-97
top: 24.25rem;
t-98
top: 24.5rem;
t-99
top: 24.75rem;
t-100
top: 25rem;
t-auto
top: auto;
t-full
top: 100%;
t-half
top: 50%;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:t-(value)
Small≥640px
md:t-(value)
Medium≥768px
lg:t-(value)
Large≥1024px
xxl:t-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:t-(value)

Negative Values

Use negative variants to position in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:t--(value)