用于控制定位元素的位置的功能类。
Class | Properties |
|---|---|
| inset-0 | top: 0px; right: 0px; bottom: 0px; left: 0px; |
| -inset-0 | top: 0px; right: 0px; bottom: 0px; left: 0px; |
| inset-y-0 | top: 0px; bottom: 0px; |
| inset-x-0 | right: 0px; left: 0px; |
| -inset-y-0 | top: 0px; bottom: 0px; |
| -inset-x-0 | right: 0px; left: 0px; |
| top-0 | top: 0px; |
| right-0 | right: 0px; |
| bottom-0 | bottom: 0px; |
| left-0 | left: 0px; |
| -top-0 | top: 0px; |
| -right-0 | right: 0px; |
| -bottom-0 | bottom: 0px; |
| -left-0 | left: 0px; |
| inset-0.5 | top: 0.125rem; right: 0.125rem; bottom: 0.125rem; left: 0.125rem; |
| -inset-0.5 | top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; |
| inset-y-0.5 | top: 0.125rem; bottom: 0.125rem; |
| inset-x-0.5 | right: 0.125rem; left: 0.125rem; |
| -inset-y-0.5 | top: -0.125rem; bottom: -0.125rem; |
| -inset-x-0.5 | right: -0.125rem; left: -0.125rem; |
| top-0.5 | top: 0.125rem; |
| right-0.5 | right: 0.125rem; |
| bottom-0.5 | bottom: 0.125rem; |
| left-0.5 | left: 0.125rem; |
| -top-0.5 | top: -0.125rem; |
| -right-0.5 | right: -0.125rem; |
| -bottom-0.5 | bottom: -0.125rem; |
| -left-0.5 | left: -0.125rem; |
| inset-1 | top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 0.25rem; |
| -inset-1 | top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem; |
| inset-y-1 | top: 0.25rem; bottom: 0.25rem; |
| inset-x-1 | right: 0.25rem; left: 0.25rem; |
| -inset-y-1 | top: -0.25rem; bottom: -0.25rem; |
| -inset-x-1 | right: -0.25rem; left: -0.25rem; |
| top-1 | top: 0.25rem; |
| right-1 | right: 0.25rem; |
| bottom-1 | bottom: 0.25rem; |
| left-1 | left: 0.25rem; |
| -top-1 | top: -0.25rem; |
| -right-1 | right: -0.25rem; |
| -bottom-1 | bottom: -0.25rem; |
| -left-1 | left: -0.25rem; |
| inset-1.5 | top: 0.375rem; right: 0.375rem; bottom: 0.375rem; left: 0.375rem; |
| -inset-1.5 | top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem; |
| inset-y-1.5 | top: 0.375rem; bottom: 0.375rem; |
| inset-x-1.5 | right: 0.375rem; left: 0.375rem; |
| -inset-y-1.5 | top: -0.375rem; bottom: -0.375rem; |
| -inset-x-1.5 | right: -0.375rem; left: -0.375rem; |
| top-1.5 | top: 0.375rem; |
| right-1.5 | right: 0.375rem; |
| bottom-1.5 | bottom: 0.375rem; |
| left-1.5 | left: 0.375rem; |
| -top-1.5 | top: -0.375rem; |
| -right-1.5 | right: -0.375rem; |
| -bottom-1.5 | bottom: -0.375rem; |
| -left-1.5 | left: -0.375rem; |
| inset-2 | top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem; |
| -inset-2 | top: -0.5rem; right: -0.5rem; bottom: -0.5rem; left: -0.5rem; |
| inset-y-2 | top: 0.5rem; bottom: 0.5rem; |
| inset-x-2 | right: 0.5rem; left: 0.5rem; |
| -inset-y-2 | top: -0.5rem; bottom: -0.5rem; |
| -inset-x-2 | right: -0.5rem; left: -0.5rem; |
| top-2 | top: 0.5rem; |
| right-2 | right: 0.5rem; |
| bottom-2 | bottom: 0.5rem; |
| left-2 | left: 0.5rem; |
| -top-2 | top: -0.5rem; |
| -right-2 | right: -0.5rem; |
| -bottom-2 | bottom: -0.5rem; |
| -left-2 | left: -0.5rem; |
| inset-2.5 | top: 0.625rem; right: 0.625rem; bottom: 0.625rem; left: 0.625rem; |
| -inset-2.5 | top: -0.625rem; right: -0.625rem; bottom: -0.625rem; left: -0.625rem; |
| inset-y-2.5 | top: 0.625rem; bottom: 0.625rem; |
| inset-x-2.5 | right: 0.625rem; left: 0.625rem; |
| -inset-y-2.5 | top: -0.625rem; bottom: -0.625rem; |
| -inset-x-2.5 | right: -0.625rem; left: -0.625rem; |
| top-2.5 | top: 0.625rem; |
| right-2.5 | right: 0.625rem; |
| bottom-2.5 | bottom: 0.625rem; |
| left-2.5 | left: 0.625rem; |
| -top-2.5 | top: -0.625rem; |
| -right-2.5 | right: -0.625rem; |
| -bottom-2.5 | bottom: -0.625rem; |
| -left-2.5 | left: -0.625rem; |
| inset-3 | top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem; |
| -inset-3 | top: -0.75rem; right: -0.75rem; bottom: -0.75rem; left: -0.75rem; |
| inset-y-3 | top: 0.75rem; bottom: 0.75rem; |
| inset-x-3 | right: 0.75rem; left: 0.75rem; |
| -inset-y-3 | top: -0.75rem; bottom: -0.75rem; |
| -inset-x-3 | right: -0.75rem; left: -0.75rem; |
| top-3 | top: 0.75rem; |
| right-3 | right: 0.75rem; |
| bottom-3 | bottom: 0.75rem; |
| left-3 | left: 0.75rem; |
| -top-3 | top: -0.75rem; |
| -right-3 | right: -0.75rem; |
| -bottom-3 | bottom: -0.75rem; |
| -left-3 | left: -0.75rem; |
| inset-3.5 | top: 0.875rem; right: 0.875rem; bottom: 0.875rem; left: 0.875rem; |
| -inset-3.5 | top: -0.875rem; right: -0.875rem; bottom: -0.875rem; left: -0.875rem; |
| inset-y-3.5 | top: 0.875rem; bottom: 0.875rem; |
| inset-x-3.5 | right: 0.875rem; left: 0.875rem; |
| -inset-y-3.5 | top: -0.875rem; bottom: -0.875rem; |
| -inset-x-3.5 | right: -0.875rem; left: -0.875rem; |
| top-3.5 | top: 0.875rem; |
| right-3.5 | right: 0.875rem; |
| bottom-3.5 | bottom: 0.875rem; |
| left-3.5 | left: 0.875rem; |
| -top-3.5 | top: -0.875rem; |
| -right-3.5 | right: -0.875rem; |
| -bottom-3.5 | bottom: -0.875rem; |
| -left-3.5 | left: -0.875rem; |
| inset-4 | top: 1rem; right: 1rem; bottom: 1rem; left: 1rem; |
| -inset-4 | top: -1rem; right: -1rem; bottom: -1rem; left: -1rem; |
| inset-y-4 | top: 1rem; bottom: 1rem; |
| inset-x-4 | right: 1rem; left: 1rem; |
| -inset-y-4 | top: -1rem; bottom: -1rem; |
| -inset-x-4 | right: -1rem; left: -1rem; |
| top-4 | top: 1rem; |
| right-4 | right: 1rem; |
| bottom-4 | bottom: 1rem; |
| left-4 | left: 1rem; |
| -top-4 | top: -1rem; |
| -right-4 | right: -1rem; |
| -bottom-4 | bottom: -1rem; |
| -left-4 | left: -1rem; |
| inset-5 | top: 1.25rem; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; |
| -inset-5 | top: -1.25rem; right: -1.25rem; bottom: -1.25rem; left: -1.25rem; |
| inset-y-5 | top: 1.25rem; bottom: 1.25rem; |
| inset-x-5 | right: 1.25rem; left: 1.25rem; |
| -inset-y-5 | top: -1.25rem; bottom: -1.25rem; |
| -inset-x-5 | right: -1.25rem; left: -1.25rem; |
| top-5 | top: 1.25rem; |
| right-5 | right: 1.25rem; |
| bottom-5 | bottom: 1.25rem; |
| left-5 | left: 1.25rem; |
| -top-5 | top: -1.25rem; |
| -right-5 | right: -1.25rem; |
| -bottom-5 | bottom: -1.25rem; |
| -left-5 | left: -1.25rem; |
| inset-6 | top: 1.5rem; right: 1.5rem; bottom: 1.5rem; left: 1.5rem; |
| -inset-6 | top: -1.5rem; right: -1.5rem; bottom: -1.5rem; left: -1.5rem; |
| inset-y-6 | top: 1.5rem; bottom: 1.5rem; |
| inset-x-6 | right: 1.5rem; left: 1.5rem; |
| -inset-y-6 | top: -1.5rem; bottom: -1.5rem; |
| -inset-x-6 | right: -1.5rem; left: -1.5rem; |
| top-6 | top: 1.5rem; |
| right-6 | right: 1.5rem; |
| bottom-6 | bottom: 1.5rem; |
| left-6 | left: 1.5rem; |
| -top-6 | top: -1.5rem; |
| -right-6 | right: -1.5rem; |
| -bottom-6 | bottom: -1.5rem; |
| -left-6 | left: -1.5rem; |
| inset-7 | top: 1.75rem; right: 1.75rem; bottom: 1.75rem; left: 1.75rem; |
| -inset-7 | top: -1.75rem; right: -1.75rem; bottom: -1.75rem; left: -1.75rem; |
| inset-y-7 | top: 1.75rem; bottom: 1.75rem; |
| inset-x-7 | right: 1.75rem; left: 1.75rem; |
| -inset-y-7 | top: -1.75rem; bottom: -1.75rem; |
| -inset-x-7 | right: -1.75rem; left: -1.75rem; |
| top-7 | top: 1.75rem; |
| right-7 | right: 1.75rem; |
| bottom-7 | bottom: 1.75rem; |
| left-7 | left: 1.75rem; |
| -top-7 | top: -1.75rem; |
| -right-7 | right: -1.75rem; |
| -bottom-7 | bottom: -1.75rem; |
| -left-7 | left: -1.75rem; |
| inset-8 | top: 2rem; right: 2rem; bottom: 2rem; left: 2rem; |
| -inset-8 | top: -2rem; right: -2rem; bottom: -2rem; left: -2rem; |
| inset-y-8 | top: 2rem; bottom: 2rem; |
| inset-x-8 | right: 2rem; left: 2rem; |
| -inset-y-8 | top: -2rem; bottom: -2rem; |
| -inset-x-8 | right: -2rem; left: -2rem; |
| top-8 | top: 2rem; |
| right-8 | right: 2rem; |
| bottom-8 | bottom: 2rem; |
| left-8 | left: 2rem; |
| -top-8 | top: -2rem; |
| -right-8 | right: -2rem; |
| -bottom-8 | bottom: -2rem; |
| -left-8 | left: -2rem; |
| inset-9 | top: 2.25rem; right: 2.25rem; bottom: 2.25rem; left: 2.25rem; |
| -inset-9 | top: -2.25rem; right: -2.25rem; bottom: -2.25rem; left: -2.25rem; |
| inset-y-9 | top: 2.25rem; bottom: 2.25rem; |
| inset-x-9 | right: 2.25rem; left: 2.25rem; |
| -inset-y-9 | top: -2.25rem; bottom: -2.25rem; |
| -inset-x-9 | right: -2.25rem; left: -2.25rem; |
| top-9 | top: 2.25rem; |
| right-9 | right: 2.25rem; |
| bottom-9 | bottom: 2.25rem; |
| left-9 | left: 2.25rem; |
| -top-9 | top: -2.25rem; |
| -right-9 | right: -2.25rem; |
| -bottom-9 | bottom: -2.25rem; |
| -left-9 | left: -2.25rem; |
| inset-10 | top: 2.5rem; right: 2.5rem; bottom: 2.5rem; left: 2.5rem; |
| -inset-10 | top: -2.5rem; right: -2.5rem; bottom: -2.5rem; left: -2.5rem; |
| inset-y-10 | top: 2.5rem; bottom: 2.5rem; |
| inset-x-10 | right: 2.5rem; left: 2.5rem; |
| -inset-y-10 | top: -2.5rem; bottom: -2.5rem; |
| -inset-x-10 | right: -2.5rem; left: -2.5rem; |
| top-10 | top: 2.5rem; |
| right-10 | right: 2.5rem; |
| bottom-10 | bottom: 2.5rem; |
| left-10 | left: 2.5rem; |
| -top-10 | top: -2.5rem; |
| -right-10 | right: -2.5rem; |
| -bottom-10 | bottom: -2.5rem; |
| -left-10 | left: -2.5rem; |
| inset-11 | top: 2.75rem; right: 2.75rem; bottom: 2.75rem; left: 2.75rem; |
| -inset-11 | top: -2.75rem; right: -2.75rem; bottom: -2.75rem; left: -2.75rem; |
| inset-y-11 | top: 2.75rem; bottom: 2.75rem; |
| inset-x-11 | right: 2.75rem; left: 2.75rem; |
| -inset-y-11 | top: -2.75rem; bottom: -2.75rem; |
| -inset-x-11 | right: -2.75rem; left: -2.75rem; |
| top-11 | top: 2.75rem; |
| right-11 | right: 2.75rem; |
| bottom-11 | bottom: 2.75rem; |
| left-11 | left: 2.75rem; |
| -top-11 | top: -2.75rem; |
| -right-11 | right: -2.75rem; |
| -bottom-11 | bottom: -2.75rem; |
| -left-11 | left: -2.75rem; |
| inset-12 | top: 3rem; right: 3rem; bottom: 3rem; left: 3rem; |
| -inset-12 | top: -3rem; right: -3rem; bottom: -3rem; left: -3rem; |
| inset-y-12 | top: 3rem; bottom: 3rem; |
| inset-x-12 | right: 3rem; left: 3rem; |
| -inset-y-12 | top: -3rem; bottom: -3rem; |
| -inset-x-12 | right: -3rem; left: -3rem; |
| top-12 | top: 3rem; |
| right-12 | right: 3rem; |
| bottom-12 | bottom: 3rem; |
| left-12 | left: 3rem; |
| -top-12 | top: -3rem; |
| -right-12 | right: -3rem; |
| -bottom-12 | bottom: -3rem; |
| -left-12 | left: -3rem; |
| inset-14 | top: 3.5rem; right: 3.5rem; bottom: 3.5rem; left: 3.5rem; |
| -inset-14 | top: -3.5rem; right: -3.5rem; bottom: -3.5rem; left: -3.5rem; |
| inset-y-14 | top: 3.5rem; bottom: 3.5rem; |
| inset-x-14 | right: 3.5rem; left: 3.5rem; |
| -inset-y-14 | top: -3.5rem; bottom: -3.5rem; |
| -inset-x-14 | right: -3.5rem; left: -3.5rem; |
| top-14 | top: 3.5rem; |
| right-14 | right: 3.5rem; |
| bottom-14 | bottom: 3.5rem; |
| left-14 | left: 3.5rem; |
| -top-14 | top: -3.5rem; |
| -right-14 | right: -3.5rem; |
| -bottom-14 | bottom: -3.5rem; |
| -left-14 | left: -3.5rem; |
| inset-16 | top: 4rem; right: 4rem; bottom: 4rem; left: 4rem; |
| -inset-16 | top: -4rem; right: -4rem; bottom: -4rem; left: -4rem; |
| inset-y-16 | top: 4rem; bottom: 4rem; |
| inset-x-16 | right: 4rem; left: 4rem; |
| -inset-y-16 | top: -4rem; bottom: -4rem; |
| -inset-x-16 | right: -4rem; left: -4rem; |
| top-16 | top: 4rem; |
| right-16 | right: 4rem; |
| bottom-16 | bottom: 4rem; |
| left-16 | left: 4rem; |
| -top-16 | top: -4rem; |
| -right-16 | right: -4rem; |
| -bottom-16 | bottom: -4rem; |
| -left-16 | left: -4rem; |
| inset-20 | top: 5rem; right: 5rem; bottom: 5rem; left: 5rem; |
| -inset-20 | top: -5rem; right: -5rem; bottom: -5rem; left: -5rem; |
| inset-y-20 | top: 5rem; bottom: 5rem; |
| inset-x-20 | right: 5rem; left: 5rem; |
| -inset-y-20 | top: -5rem; bottom: -5rem; |
| -inset-x-20 | right: -5rem; left: -5rem; |
| top-20 | top: 5rem; |
| right-20 | right: 5rem; |
| bottom-20 | bottom: 5rem; |
| left-20 | left: 5rem; |
| -top-20 | top: -5rem; |
| -right-20 | right: -5rem; |
| -bottom-20 | bottom: -5rem; |
| -left-20 | left: -5rem; |
| inset-24 | top: 6rem; right: 6rem; bottom: 6rem; left: 6rem; |
| -inset-24 | top: -6rem; right: -6rem; bottom: -6rem; left: -6rem; |
| inset-y-24 | top: 6rem; bottom: 6rem; |
| inset-x-24 | right: 6rem; left: 6rem; |
| -inset-y-24 | top: -6rem; bottom: -6rem; |
| -inset-x-24 | right: -6rem; left: -6rem; |
| top-24 | top: 6rem; |
| right-24 | right: 6rem; |
| bottom-24 | bottom: 6rem; |
| left-24 | left: 6rem; |
| -top-24 | top: -6rem; |
| -right-24 | right: -6rem; |
| -bottom-24 | bottom: -6rem; |
| -left-24 | left: -6rem; |
| inset-28 | top: 7rem; right: 7rem; bottom: 7rem; left: 7rem; |
| -inset-28 | top: -7rem; right: -7rem; bottom: -7rem; left: -7rem; |
| inset-y-28 | top: 7rem; bottom: 7rem; |
| inset-x-28 | right: 7rem; left: 7rem; |
| -inset-y-28 | top: -7rem; bottom: -7rem; |
| -inset-x-28 | right: -7rem; left: -7rem; |
| top-28 | top: 7rem; |
| right-28 | right: 7rem; |
| bottom-28 | bottom: 7rem; |
| left-28 | left: 7rem; |
| -top-28 | top: -7rem; |
| -right-28 | right: -7rem; |
| -bottom-28 | bottom: -7rem; |
| -left-28 | left: -7rem; |
| inset-32 | top: 8rem; right: 8rem; bottom: 8rem; left: 8rem; |
| -inset-32 | top: -8rem; right: -8rem; bottom: -8rem; left: -8rem; |
| inset-y-32 | top: 8rem; bottom: 8rem; |
| inset-x-32 | right: 8rem; left: 8rem; |
| -inset-y-32 | top: -8rem; bottom: -8rem; |
| -inset-x-32 | right: -8rem; left: -8rem; |
| top-32 | top: 8rem; |
| right-32 | right: 8rem; |
| bottom-32 | bottom: 8rem; |
| left-32 | left: 8rem; |
| -top-32 | top: -8rem; |
| -right-32 | right: -8rem; |
| -bottom-32 | bottom: -8rem; |
| -left-32 | left: -8rem; |
| inset-36 | top: 9rem; right: 9rem; bottom: 9rem; left: 9rem; |
| -inset-36 | top: -9rem; right: -9rem; bottom: -9rem; left: -9rem; |
| inset-y-36 | top: 9rem; bottom: 9rem; |
| inset-x-36 | right: 9rem; left: 9rem; |
| -inset-y-36 | top: -9rem; bottom: -9rem; |
| -inset-x-36 | right: -9rem; left: -9rem; |
| top-36 | top: 9rem; |
| right-36 | right: 9rem; |
| bottom-36 | bottom: 9rem; |
| left-36 | left: 9rem; |
| -top-36 | top: -9rem; |
| -right-36 | right: -9rem; |
| -bottom-36 | bottom: -9rem; |
| -left-36 | left: -9rem; |
| inset-40 | top: 10rem; right: 10rem; bottom: 10rem; left: 10rem; |
| -inset-40 | top: -10rem; right: -10rem; bottom: -10rem; left: -10rem; |
| inset-y-40 | top: 10rem; bottom: 10rem; |
| inset-x-40 | right: 10rem; left: 10rem; |
| -inset-y-40 | top: -10rem; bottom: -10rem; |
| -inset-x-40 | right: -10rem; left: -10rem; |
| top-40 | top: 10rem; |
| right-40 | right: 10rem; |
| bottom-40 | bottom: 10rem; |
| left-40 | left: 10rem; |
| -top-40 | top: -10rem; |
| -right-40 | right: -10rem; |
| -bottom-40 | bottom: -10rem; |
| -left-40 | left: -10rem; |
| inset-44 | top: 11rem; right: 11rem; bottom: 11rem; left: 11rem; |
| -inset-44 | top: -11rem; right: -11rem; bottom: -11rem; left: -11rem; |
| inset-y-44 | top: 11rem; bottom: 11rem; |
| inset-x-44 | right: 11rem; left: 11rem; |
| -inset-y-44 | top: -11rem; bottom: -11rem; |
| -inset-x-44 | right: -11rem; left: -11rem; |
| top-44 | top: 11rem; |
| right-44 | right: 11rem; |
| bottom-44 | bottom: 11rem; |
| left-44 | left: 11rem; |
| -top-44 | top: -11rem; |
| -right-44 | right: -11rem; |
| -bottom-44 | bottom: -11rem; |
| -left-44 | left: -11rem; |
| inset-48 | top: 12rem; right: 12rem; bottom: 12rem; left: 12rem; |
| -inset-48 | top: -12rem; right: -12rem; bottom: -12rem; left: -12rem; |
| inset-y-48 | top: 12rem; bottom: 12rem; |
| inset-x-48 | right: 12rem; left: 12rem; |
| -inset-y-48 | top: -12rem; bottom: -12rem; |
| -inset-x-48 | right: -12rem; left: -12rem; |
| top-48 | top: 12rem; |
| right-48 | right: 12rem; |
| bottom-48 | bottom: 12rem; |
| left-48 | left: 12rem; |
| -top-48 | top: -12rem; |
| -right-48 | right: -12rem; |
| -bottom-48 | bottom: -12rem; |
| -left-48 | left: -12rem; |
| inset-52 | top: 13rem; right: 13rem; bottom: 13rem; left: 13rem; |
| -inset-52 | top: -13rem; right: -13rem; bottom: -13rem; left: -13rem; |
| inset-y-52 | top: 13rem; bottom: 13rem; |
| inset-x-52 | right: 13rem; left: 13rem; |
| -inset-y-52 | top: -13rem; bottom: -13rem; |
| -inset-x-52 | right: -13rem; left: -13rem; |
| top-52 | top: 13rem; |
| right-52 | right: 13rem; |
| bottom-52 | bottom: 13rem; |
| left-52 | left: 13rem; |
| -top-52 | top: -13rem; |
| -right-52 | right: -13rem; |
| -bottom-52 | bottom: -13rem; |
| -left-52 | left: -13rem; |
| inset-56 | top: 14rem; right: 14rem; bottom: 14rem; left: 14rem; |
| -inset-56 | top: -14rem; right: -14rem; bottom: -14rem; left: -14rem; |
| inset-y-56 | top: 14rem; bottom: 14rem; |
| inset-x-56 | right: 14rem; left: 14rem; |
| -inset-y-56 | top: -14rem; bottom: -14rem; |
| -inset-x-56 | right: -14rem; left: -14rem; |
| top-56 | top: 14rem; |
| right-56 | right: 14rem; |
| bottom-56 | bottom: 14rem; |
| left-56 | left: 14rem; |
| -top-56 | top: -14rem; |
| -right-56 | right: -14rem; |
| -bottom-56 | bottom: -14rem; |
| -left-56 | left: -14rem; |
| inset-60 | top: 15rem; right: 15rem; bottom: 15rem; left: 15rem; |
| -inset-60 | top: -15rem; right: -15rem; bottom: -15rem; left: -15rem; |
| inset-y-60 | top: 15rem; bottom: 15rem; |
| inset-x-60 | right: 15rem; left: 15rem; |
| -inset-y-60 | top: -15rem; bottom: -15rem; |
| -inset-x-60 | right: -15rem; left: -15rem; |
| top-60 | top: 15rem; |
| right-60 | right: 15rem; |
| bottom-60 | bottom: 15rem; |
| left-60 | left: 15rem; |
| -top-60 | top: -15rem; |
| -right-60 | right: -15rem; |
| -bottom-60 | bottom: -15rem; |
| -left-60 | left: -15rem; |
| inset-64 | top: 16rem; right: 16rem; bottom: 16rem; left: 16rem; |
| -inset-64 | top: -16rem; right: -16rem; bottom: -16rem; left: -16rem; |
| inset-y-64 | top: 16rem; bottom: 16rem; |
| inset-x-64 | right: 16rem; left: 16rem; |
| -inset-y-64 | top: -16rem; bottom: -16rem; |
| -inset-x-64 | right: -16rem; left: -16rem; |
| top-64 | top: 16rem; |
| right-64 | right: 16rem; |
| bottom-64 | bottom: 16rem; |
| left-64 | left: 16rem; |
| -top-64 | top: -16rem; |
| -right-64 | right: -16rem; |
| -bottom-64 | bottom: -16rem; |
| -left-64 | left: -16rem; |
| inset-72 | top: 18rem; right: 18rem; bottom: 18rem; left: 18rem; |
| -inset-72 | top: -18rem; right: -18rem; bottom: -18rem; left: -18rem; |
| inset-y-72 | top: 18rem; bottom: 18rem; |
| inset-x-72 | right: 18rem; left: 18rem; |
| -inset-y-72 | top: -18rem; bottom: -18rem; |
| -inset-x-72 | right: -18rem; left: -18rem; |
| top-72 | top: 18rem; |
| right-72 | right: 18rem; |
| bottom-72 | bottom: 18rem; |
| left-72 | left: 18rem; |
| -top-72 | top: -18rem; |
| -right-72 | right: -18rem; |
| -bottom-72 | bottom: -18rem; |
| -left-72 | left: -18rem; |
| inset-80 | top: 20rem; right: 20rem; bottom: 20rem; left: 20rem; |
| -inset-80 | top: -20rem; right: -20rem; bottom: -20rem; left: -20rem; |
| inset-y-80 | top: 20rem; bottom: 20rem; |
| inset-x-80 | right: 20rem; left: 20rem; |
| -inset-y-80 | top: -20rem; bottom: -20rem; |
| -inset-x-80 | right: -20rem; left: -20rem; |
| top-80 | top: 20rem; |
| right-80 | right: 20rem; |
| bottom-80 | bottom: 20rem; |
| left-80 | left: 20rem; |
| -top-80 | top: -20rem; |
| -right-80 | right: -20rem; |
| -bottom-80 | bottom: -20rem; |
| -left-80 | left: -20rem; |
| inset-96 | top: 24rem; right: 24rem; bottom: 24rem; left: 24rem; |
| -inset-96 | top: -24rem; right: -24rem; bottom: -24rem; left: -24rem; |
| inset-y-96 | top: 24rem; bottom: 24rem; |
| inset-x-96 | right: 24rem; left: 24rem; |
| -inset-y-96 | top: -24rem; bottom: -24rem; |
| -inset-x-96 | right: -24rem; left: -24rem; |
| top-96 | top: 24rem; |
| right-96 | right: 24rem; |
| bottom-96 | bottom: 24rem; |
| left-96 | left: 24rem; |
| -top-96 | top: -24rem; |
| -right-96 | right: -24rem; |
| -bottom-96 | bottom: -24rem; |
| -left-96 | left: -24rem; |
| inset-auto | top: auto; right: auto; bottom: auto; left: auto; |
| inset-px | top: 1px; right: 1px; bottom: 1px; left: 1px; |
| -inset-px | top: -1px; right: -1px; bottom: -1px; left: -1px; |
| inset-1/2 | top: 50%; right: 50%; bottom: 50%; left: 50%; |
| inset-1/3 | top: 33.333333%; right: 33.333333%; bottom: 33.333333%; left: 33.333333%; |
| inset-2/3 | top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left: 66.666667%; |
| inset-1/4 | top: 25%; right: 25%; bottom: 25%; left: 25%; |
| inset-2/4 | top: 50%; right: 50%; bottom: 50%; left: 50%; |
| inset-3/4 | top: 75%; right: 75%; bottom: 75%; left: 75%; |
| inset-full | top: 100%; right: 100%; bottom: 100%; left: 100%; |
| -inset-1/2 | top: -50%; right: -50%; bottom: -50%; left: -50%; |
| -inset-1/3 | top: -33.333333%; right: -33.333333%; bottom: -33.333333%; left: -33.333333%; |
| -inset-2/3 | top: -66.666667%; right: -66.666667%; bottom: -66.666667%; left: -66.666667%; |
| -inset-1/4 | top: -25%; right: -25%; bottom: -25%; left: -25%; |
| -inset-2/4 | top: -50%; right: -50%; bottom: -50%; left: -50%; |
| -inset-3/4 | top: -75%; right: -75%; bottom: -75%; left: -75%; |
| -inset-full | top: -100%; right: -100%; bottom: -100%; left: -100%; |
| inset-y-auto | top: auto; bottom: auto; |
| inset-x-auto | right: auto; left: auto; |
| inset-y-px | top: 1px; bottom: 1px; |
| inset-x-px | right: 1px; left: 1px; |
| -inset-y-px | top: -1px; bottom: -1px; |
| -inset-x-px | right: -1px; left: -1px; |
| inset-y-1/2 | top: 50%; bottom: 50%; |
| inset-x-1/2 | right: 50%; left: 50%; |
| inset-y-1/3 | top: 33.333333%; bottom: 33.333333%; |
| inset-x-1/3 | right: 33.333333%; left: 33.333333%; |
| inset-y-2/3 | top: 66.666667%; bottom: 66.666667%; |
| inset-x-2/3 | right: 66.666667%; left: 66.666667%; |
| inset-y-1/4 | top: 25%; bottom: 25%; |
| inset-x-1/4 | right: 25%; left: 25%; |
| inset-y-2/4 | top: 50%; bottom: 50%; |
| inset-x-2/4 | right: 50%; left: 50%; |
| inset-y-3/4 | top: 75%; bottom: 75%; |
| inset-x-3/4 | right: 75%; left: 75%; |
| inset-y-full | top: 100%; bottom: 100%; |
| inset-x-full | right: 100%; left: 100%; |
| -inset-y-1/2 | top: -50%; bottom: -50%; |
| -inset-x-1/2 | right: -50%; left: -50%; |
| -inset-y-1/3 | top: -33.333333%; bottom: -33.333333%; |
| -inset-x-1/3 | right: -33.333333%; left: -33.333333%; |
| -inset-y-2/3 | top: -66.666667%; bottom: -66.666667%; |
| -inset-x-2/3 | right: -66.666667%; left: -66.666667%; |
| -inset-y-1/4 | top: -25%; bottom: -25%; |
| -inset-x-1/4 | right: -25%; left: -25%; |
| -inset-y-2/4 | top: -50%; bottom: -50%; |
| -inset-x-2/4 | right: -50%; left: -50%; |
| -inset-y-3/4 | top: -75%; bottom: -75%; |
| -inset-x-3/4 | right: -75%; left: -75%; |
| -inset-y-full | top: -100%; bottom: -100%; |
| -inset-x-full | right: -100%; left: -100%; |
| top-auto | top: auto; |
| right-auto | right: auto; |
| bottom-auto | bottom: auto; |
| left-auto | left: auto; |
| top-px | top: 1px; |
| right-px | right: 1px; |
| bottom-px | bottom: 1px; |
| left-px | left: 1px; |
| -top-px | top: -1px; |
| -right-px | right: -1px; |
| -bottom-px | bottom: -1px; |
| -left-px | left: -1px; |
| top-1/2 | top: 50%; |
| right-1/2 | right: 50%; |
| bottom-1/2 | bottom: 50%; |
| left-1/2 | left: 50%; |
| top-1/3 | top: 33.333333%; |
| right-1/3 | right: 33.333333%; |
| bottom-1/3 | bottom: 33.333333%; |
| left-1/3 | left: 33.333333%; |
| top-2/3 | top: 66.666667%; |
| right-2/3 | right: 66.666667%; |
| bottom-2/3 | bottom: 66.666667%; |
| left-2/3 | left: 66.666667%; |
| top-1/4 | top: 25%; |
| right-1/4 | right: 25%; |
| bottom-1/4 | bottom: 25%; |
| left-1/4 | left: 25%; |
| top-2/4 | top: 50%; |
| right-2/4 | right: 50%; |
| bottom-2/4 | bottom: 50%; |
| left-2/4 | left: 50%; |
| top-3/4 | top: 75%; |
| right-3/4 | right: 75%; |
| bottom-3/4 | bottom: 75%; |
| left-3/4 | left: 75%; |
| top-full | top: 100%; |
| right-full | right: 100%; |
| bottom-full | bottom: 100%; |
| left-full | left: 100%; |
| -top-1/2 | top: -50%; |
| -right-1/2 | right: -50%; |
| -bottom-1/2 | bottom: -50%; |
| -left-1/2 | left: -50%; |
| -top-1/3 | top: -33.333333%; |
| -right-1/3 | right: -33.333333%; |
| -bottom-1/3 | bottom: -33.333333%; |
| -left-1/3 | left: -33.333333%; |
| -top-2/3 | top: -66.666667%; |
| -right-2/3 | right: -66.666667%; |
| -bottom-2/3 | bottom: -66.666667%; |
| -left-2/3 | left: -66.666667%; |
| -top-1/4 | top: -25%; |
| -right-1/4 | right: -25%; |
| -bottom-1/4 | bottom: -25%; |
| -left-1/4 | left: -25%; |
| -top-2/4 | top: -50%; |
| -right-2/4 | right: -50%; |
| -bottom-2/4 | bottom: -50%; |
| -left-2/4 | left: -50%; |
| -top-3/4 | top: -75%; |
| -right-3/4 | right: -75%; |
| -bottom-3/4 | bottom: -75%; |
| -left-3/4 | left: -75%; |
| -top-full | top: -100%; |
| -right-full | right: -100%; |
| -bottom-full | bottom: -100%; |
| -left-full | left: -100%; |
使用 {top|right|bottom|left|inset}-0 功能类，将绝对定位的元素锚定在最近定位的父元素的任何边缘上。
结合 Tailwind 的 padding 和 margin 功能类，您可能会发现这些是所有的您需要的用来精确控制绝对定位元素的功能类。
<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
<div class="absolute inset-x-0 top-0 h-16 w-16 ...">1</div>
</div>
<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
<div class="absolute inset-y-0 right-0 w-16 ...">2</div>
</div>
<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
<div class="absolute inset-x-0 bottom-0 h-16 w-16 ...">3</div>
</div>
<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
<div class="absolute inset-y-0 left-0 w-16 ...">4</div>
</div>
<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
<div class="absolute inset-0 ...">5</div>
</div>
<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
<div class="absolute left-0 top-0 h-16 w-16 ...">6</div>
</div>
<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
<div class="absolute top-0 right-0 h-16 w-16 ...">7</div>
</div>
<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
<div class="absolute bottom-0 right-0 h-16 w-16 ...">8</div>
</div>
<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ...">
<div class="absolute bottom-0 left-0 h-16 w-16 ...">9</div>
</div>要仅在特定的断点处定位一个元素，请在任何现有的定位功能类前添加 {screen}: 前缀。例如，将 md:inset-y-0 类添加到一个元素上，就可以在中等尺寸及以上的屏幕上使用 inset-y-0 功能类。
<div class="relative h-32 ...">
<div class="absolute inset-0 md:inset-y-0 ..."></div>
</div>关于 Tailwind 的响应式设计功能的更多信息，请查看 响应式设计 文档。
默认情况下，Tailwind 只提供值为 0 和 auto 的 top/right/bottom/left/inset 功能类。您可以通过编辑 tailwind.config.js 文件中的 theme.inset 部分来改变、添加或删除这些功能类。
// tailwind.config.js
module.exports = {
theme: {
inset: {
'0': 0,
- auto: 'auto',
+ '1/2': '50%',
}
}
}如果您想添加任何负的 top/right/bottom/left 类，在您的配置文件中的键前加上破折号。这些类与 Tailwind 的 [负外边距] (/docs/margin#negative-margins) 类的形式相同。
// tailwind.config.js
module.exports = {
theme: {
extend: {
inset: {
+ '-16': '-4rem',
}
}
}
}Tailwind 很聪明，当它看到前面的破折号时，就会生成像 -top-16 这样的类，而不是像您可能想象的那样生成 top--16。
默认情况下， 针对 top, right, bottom, left, and inset 功能类，只生成 responsive 变体。
您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 inset 属性来控制为 top, right, bottom, left, and inset 功能生成哪些变体。
例如，这个配置也将生成 hover and focus 变体:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ inset: ['hover', 'focus'],
}
}
}如果您不打算在您的项目中使用 top, right, bottom, left, and inset 功能，您可以通过在配置文件的 corePlugins 部分将 inset property to false in the corePlugins section of your config file:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ inset: false,
}
}