top-auto
top: auto;
top-px
top: 1px;
top-full
top: 100%;
-top-px
top: -1px;
-top-full
top: -100%;
top-safe
top: env(safe-area-inset-top);
top-<number>
top: calc(var(--spacing) * <number>);/* 0.25rem */
top-4
top: calc(var(--spacing) * 4);
top-<fraction>
top: <percentage>;
top-1/2
top: 50%;
top-[<value>]
top: <value>;
top-[1rem]
top: 1rem;
top-(<custom-property>)
top: var(<custom-property>);
top-(--my-length)
top: var(--my-length);
top-(length:<custom-property>)
top-(length:--my-length)
-top-<number>
top: calc(var(--spacing) * -<number>);/* 0.25rem */
-top-4
top: calc(var(--spacing) * -4);
-top-<fraction>
top: calc(<percentage> * -1);
-top-1/2
top: calc(50% * -1);
top-safe-<number>
top: env(safe-area-inset-top, calc(var(--spacing) * <number>));/* 0.25rem */
top-safe-4
top: env(safe-area-inset-top, calc(var(--spacing) * 4));
top-safe-<fraction>
top: env(safe-area-inset-top, <percentage>);
top-safe-1/2
top: env(safe-area-inset-top, 50%);
top-safe-[<value>]
top: env(safe-area-inset-top, <value>);
top-safe-[1rem]
top: env(safe-area-inset-top, 1rem);
top-safe-(<custom-property>)
top: env(safe-area-inset-top, var(<custom-property>));
top-safe-(--my-length)
top: env(safe-area-inset-top, var(--my-length));
top-safe-(length:<custom-property>)
top-safe-(length:--my-length)
© 2026, Fynydd LLC / King of Prussia, Pennsylvania; United States / +1 855-439-6933
By using this website you accept our privacy policy. Choose the browser data you consent to allow:
