Top / Right / Bottom / Left

Utilities for controlling the placement of positioned elements.

Default class reference

Class
Properties
inset-0top: 0px; right: 0px; bottom: 0px; left: 0px;
-inset-0top: 0px; right: 0px; bottom: 0px; left: 0px;
inset-x-0left: 0px; right: 0px;
-inset-x-0left: 0px; right: 0px;
inset-y-0top: 0px; bottom: 0px;
-inset-y-0top: 0px; bottom: 0px;
top-0top: 0px;
-top-0top: 0px;
right-0right: 0px;
-right-0right: 0px;
bottom-0bottom: 0px;
-bottom-0bottom: 0px;
left-0left: 0px;
-left-0left: 0px;
inset-pxtop: 1px; right: 1px; bottom: 1px; left: 1px;
-inset-pxtop: -1px; right: -1px; bottom: -1px; left: -1px;
inset-x-pxleft: 1px; right: 1px;
-inset-x-pxleft: -1px; right: -1px;
inset-y-pxtop: 1px; bottom: 1px;
-inset-y-pxtop: -1px; bottom: -1px;
top-pxtop: 1px;
-top-pxtop: -1px;
right-pxright: 1px;
-right-pxright: -1px;
bottom-pxbottom: 1px;
-bottom-pxbottom: -1px;
left-pxleft: 1px;
-left-pxleft: -1px;
inset-0.5top: 0.125rem; right: 0.125rem; bottom: 0.125rem; left: 0.125rem;
-inset-0.5top: -0.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem;
inset-x-0.5left: 0.125rem; right: 0.125rem;
-inset-x-0.5left: -0.125rem; right: -0.125rem;
inset-y-0.5top: 0.125rem; bottom: 0.125rem;
-inset-y-0.5top: -0.125rem; bottom: -0.125rem;
top-0.5top: 0.125rem;
-top-0.5top: -0.125rem;
right-0.5right: 0.125rem;
-right-0.5right: -0.125rem;
bottom-0.5bottom: 0.125rem;
-bottom-0.5bottom: -0.125rem;
left-0.5left: 0.125rem;
-left-0.5left: -0.125rem;
inset-1top: 0.25rem; right: 0.25rem; bottom: 0.25rem; left: 0.25rem;
-inset-1top: -0.25rem; right: -0.25rem; bottom: -0.25rem; left: -0.25rem;
inset-x-1left: 0.25rem; right: 0.25rem;
-inset-x-1left: -0.25rem; right: -0.25rem;
inset-y-1top: 0.25rem; bottom: 0.25rem;
-inset-y-1top: -0.25rem; bottom: -0.25rem;
top-1top: 0.25rem;
-top-1top: -0.25rem;
right-1right: 0.25rem;
-right-1right: -0.25rem;
bottom-1bottom: 0.25rem;
-bottom-1bottom: -0.25rem;
left-1left: 0.25rem;
-left-1left: -0.25rem;
inset-1.5top: 0.375rem; right: 0.375rem; bottom: 0.375rem; left: 0.375rem;
-inset-1.5top: -0.375rem; right: -0.375rem; bottom: -0.375rem; left: -0.375rem;
inset-x-1.5left: 0.375rem; right: 0.375rem;
-inset-x-1.5left: -0.375rem; right: -0.375rem;
inset-y-1.5top: 0.375rem; bottom: 0.375rem;
-inset-y-1.5top: -0.375rem; bottom: -0.375rem;
top-1.5top: 0.375rem;
-top-1.5top: -0.375rem;
right-1.5right: 0.375rem;
-right-1.5right: -0.375rem;
bottom-1.5bottom: 0.375rem;
-bottom-1.5bottom: -0.375rem;
left-1.5left: 0.375rem;
-left-1.5left: -0.375rem;
inset-2top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem;
-inset-2top: -0.5rem; right: -0.5rem; bottom: -0.5rem; left: -0.5rem;
inset-x-2left: 0.5rem; right: 0.5rem;
-inset-x-2left: -0.5rem; right: -0.5rem;
inset-y-2top: 0.5rem; bottom: 0.5rem;
-inset-y-2top: -0.5rem; bottom: -0.5rem;
top-2top: 0.5rem;
-top-2top: -0.5rem;
right-2right: 0.5rem;
-right-2right: -0.5rem;
bottom-2bottom: 0.5rem;
-bottom-2bottom: -0.5rem;
left-2left: 0.5rem;
-left-2left: -0.5rem;
inset-2.5top: 0.625rem; right: 0.625rem; bottom: 0.625rem; left: 0.625rem;
-inset-2.5top: -0.625rem; right: -0.625rem; bottom: -0.625rem; left: -0.625rem;
inset-x-2.5left: 0.625rem; right: 0.625rem;
-inset-x-2.5left: -0.625rem; right: -0.625rem;
inset-y-2.5top: 0.625rem; bottom: 0.625rem;
-inset-y-2.5top: -0.625rem; bottom: -0.625rem;
top-2.5top: 0.625rem;
-top-2.5top: -0.625rem;
right-2.5right: 0.625rem;
-right-2.5right: -0.625rem;
bottom-2.5bottom: 0.625rem;
-bottom-2.5bottom: -0.625rem;
left-2.5left: 0.625rem;
-left-2.5left: -0.625rem;
inset-3top: 0.75rem; right: 0.75rem; bottom: 0.75rem; left: 0.75rem;
-inset-3top: -0.75rem; right: -0.75rem; bottom: -0.75rem; left: -0.75rem;
inset-x-3left: 0.75rem; right: 0.75rem;
-inset-x-3left: -0.75rem; right: -0.75rem;
inset-y-3top: 0.75rem; bottom: 0.75rem;
-inset-y-3top: -0.75rem; bottom: -0.75rem;
top-3top: 0.75rem;
-top-3top: -0.75rem;
right-3right: 0.75rem;
-right-3right: -0.75rem;
bottom-3bottom: 0.75rem;
-bottom-3bottom: -0.75rem;
left-3left: 0.75rem;
-left-3left: -0.75rem;
inset-3.5top: 0.875rem; right: 0.875rem; bottom: 0.875rem; left: 0.875rem;
-inset-3.5top: -0.875rem; right: -0.875rem; bottom: -0.875rem; left: -0.875rem;
inset-x-3.5left: 0.875rem; right: 0.875rem;
-inset-x-3.5left: -0.875rem; right: -0.875rem;
inset-y-3.5top: 0.875rem; bottom: 0.875rem;
-inset-y-3.5top: -0.875rem; bottom: -0.875rem;
top-3.5top: 0.875rem;
-top-3.5top: -0.875rem;
right-3.5right: 0.875rem;
-right-3.5right: -0.875rem;
bottom-3.5bottom: 0.875rem;
-bottom-3.5bottom: -0.875rem;
left-3.5left: 0.875rem;
-left-3.5left: -0.875rem;
inset-4top: 1rem; right: 1rem; bottom: 1rem; left: 1rem;
-inset-4top: -1rem; right: -1rem; bottom: -1rem; left: -1rem;
inset-x-4left: 1rem; right: 1rem;
-inset-x-4left: -1rem; right: -1rem;
inset-y-4top: 1rem; bottom: 1rem;
-inset-y-4top: -1rem; bottom: -1rem;
top-4top: 1rem;
-top-4top: -1rem;
right-4right: 1rem;
-right-4right: -1rem;
bottom-4bottom: 1rem;
-bottom-4bottom: -1rem;
left-4left: 1rem;
-left-4left: -1rem;
inset-5top: 1.25rem; right: 1.25rem; bottom: 1.25rem; left: 1.25rem;
-inset-5top: -1.25rem; right: -1.25rem; bottom: -1.25rem; left: -1.25rem;
inset-x-5left: 1.25rem; right: 1.25rem;
-inset-x-5left: -1.25rem; right: -1.25rem;
inset-y-5top: 1.25rem; bottom: 1.25rem;
-inset-y-5top: -1.25rem; bottom: -1.25rem;
top-5top: 1.25rem;
-top-5top: -1.25rem;
right-5right: 1.25rem;
-right-5right: -1.25rem;
bottom-5bottom: 1.25rem;
-bottom-5bottom: -1.25rem;
left-5left: 1.25rem;
-left-5left: -1.25rem;
inset-6top: 1.5rem; right: 1.5rem; bottom: 1.5rem; left: 1.5rem;
-inset-6top: -1.5rem; right: -1.5rem; bottom: -1.5rem; left: -1.5rem;
inset-x-6left: 1.5rem; right: 1.5rem;
-inset-x-6left: -1.5rem; right: -1.5rem;
inset-y-6top: 1.5rem; bottom: 1.5rem;
-inset-y-6top: -1.5rem; bottom: -1.5rem;
top-6top: 1.5rem;
-top-6top: -1.5rem;
right-6right: 1.5rem;
-right-6right: -1.5rem;
bottom-6bottom: 1.5rem;
-bottom-6bottom: -1.5rem;
left-6left: 1.5rem;
-left-6left: -1.5rem;
inset-7top: 1.75rem; right: 1.75rem; bottom: 1.75rem; left: 1.75rem;
-inset-7top: -1.75rem; right: -1.75rem; bottom: -1.75rem; left: -1.75rem;
inset-x-7left: 1.75rem; right: 1.75rem;
-inset-x-7left: -1.75rem; right: -1.75rem;
inset-y-7top: 1.75rem; bottom: 1.75rem;
-inset-y-7top: -1.75rem; bottom: -1.75rem;
top-7top: 1.75rem;
-top-7top: -1.75rem;
right-7right: 1.75rem;
-right-7right: -1.75rem;
bottom-7bottom: 1.75rem;
-bottom-7bottom: -1.75rem;
left-7left: 1.75rem;
-left-7left: -1.75rem;
inset-8top: 2rem; right: 2rem; bottom: 2rem; left: 2rem;
-inset-8top: -2rem; right: -2rem; bottom: -2rem; left: -2rem;
inset-x-8left: 2rem; right: 2rem;
-inset-x-8left: -2rem; right: -2rem;
inset-y-8top: 2rem; bottom: 2rem;
-inset-y-8top: -2rem; bottom: -2rem;
top-8top: 2rem;
-top-8top: -2rem;
right-8right: 2rem;
-right-8right: -2rem;
bottom-8bottom: 2rem;
-bottom-8bottom: -2rem;
left-8left: 2rem;
-left-8left: -2rem;
inset-9top: 2.25rem; right: 2.25rem; bottom: 2.25rem; left: 2.25rem;
-inset-9top: -2.25rem; right: -2.25rem; bottom: -2.25rem; left: -2.25rem;
inset-x-9left: 2.25rem; right: 2.25rem;
-inset-x-9left: -2.25rem; right: -2.25rem;
inset-y-9top: 2.25rem; bottom: 2.25rem;
-inset-y-9top: -2.25rem; bottom: -2.25rem;
top-9top: 2.25rem;
-top-9top: -2.25rem;
right-9right: 2.25rem;
-right-9right: -2.25rem;
bottom-9bottom: 2.25rem;
-bottom-9bottom: -2.25rem;
left-9left: 2.25rem;
-left-9left: -2.25rem;
inset-10top: 2.5rem; right: 2.5rem; bottom: 2.5rem; left: 2.5rem;
-inset-10top: -2.5rem; right: -2.5rem; bottom: -2.5rem; left: -2.5rem;
inset-x-10left: 2.5rem; right: 2.5rem;
-inset-x-10left: -2.5rem; right: -2.5rem;
inset-y-10top: 2.5rem; bottom: 2.5rem;
-inset-y-10top: -2.5rem; bottom: -2.5rem;
top-10top: 2.5rem;
-top-10top: -2.5rem;
right-10right: 2.5rem;
-right-10right: -2.5rem;
bottom-10bottom: 2.5rem;
-bottom-10bottom: -2.5rem;
left-10left: 2.5rem;
-left-10left: -2.5rem;
inset-11top: 2.75rem; right: 2.75rem; bottom: 2.75rem; left: 2.75rem;
-inset-11top: -2.75rem; right: -2.75rem; bottom: -2.75rem; left: -2.75rem;
inset-x-11left: 2.75rem; right: 2.75rem;
-inset-x-11left: -2.75rem; right: -2.75rem;
inset-y-11top: 2.75rem; bottom: 2.75rem;
-inset-y-11top: -2.75rem; bottom: -2.75rem;
top-11top: 2.75rem;
-top-11top: -2.75rem;
right-11right: 2.75rem;
-right-11right: -2.75rem;
bottom-11bottom: 2.75rem;
-bottom-11bottom: -2.75rem;
left-11left: 2.75rem;
-left-11left: -2.75rem;
inset-12top: 3rem; right: 3rem; bottom: 3rem; left: 3rem;
-inset-12top: -3rem; right: -3rem; bottom: -3rem; left: -3rem;
inset-x-12left: 3rem; right: 3rem;
-inset-x-12left: -3rem; right: -3rem;
inset-y-12top: 3rem; bottom: 3rem;
-inset-y-12top: -3rem; bottom: -3rem;
top-12top: 3rem;
-top-12top: -3rem;
right-12right: 3rem;
-right-12right: -3rem;
bottom-12bottom: 3rem;
-bottom-12bottom: -3rem;
left-12left: 3rem;
-left-12left: -3rem;
inset-14top: 3.5rem; right: 3.5rem; bottom: 3.5rem; left: 3.5rem;
-inset-14top: -3.5rem; right: -3.5rem; bottom: -3.5rem; left: -3.5rem;
inset-x-14left: 3.5rem; right: 3.5rem;
-inset-x-14left: -3.5rem; right: -3.5rem;
inset-y-14top: 3.5rem; bottom: 3.5rem;
-inset-y-14top: -3.5rem; bottom: -3.5rem;
top-14top: 3.5rem;
-top-14top: -3.5rem;
right-14right: 3.5rem;
-right-14right: -3.5rem;
bottom-14bottom: 3.5rem;
-bottom-14bottom: -3.5rem;
left-14left: 3.5rem;
-left-14left: -3.5rem;
inset-16top: 4rem; right: 4rem; bottom: 4rem; left: 4rem;
-inset-16top: -4rem; right: -4rem; bottom: -4rem; left: -4rem;
inset-x-16left: 4rem; right: 4rem;
-inset-x-16left: -4rem; right: -4rem;
inset-y-16top: 4rem; bottom: 4rem;
-inset-y-16top: -4rem; bottom: -4rem;
top-16top: 4rem;
-top-16top: -4rem;
right-16right: 4rem;
-right-16right: -4rem;
bottom-16bottom: 4rem;
-bottom-16bottom: -4rem;
left-16left: 4rem;
-left-16left: -4rem;
inset-20top: 5rem; right: 5rem; bottom: 5rem; left: 5rem;
-inset-20top: -5rem; right: -5rem; bottom: -5rem; left: -5rem;
inset-x-20left: 5rem; right: 5rem;
-inset-x-20left: -5rem; right: -5rem;
inset-y-20top: 5rem; bottom: 5rem;
-inset-y-20top: -5rem; bottom: -5rem;
top-20top: 5rem;
-top-20top: -5rem;
right-20right: 5rem;
-right-20right: -5rem;
bottom-20bottom: 5rem;
-bottom-20bottom: -5rem;
left-20left: 5rem;
-left-20left: -5rem;
inset-24top: 6rem; right: 6rem; bottom: 6rem; left: 6rem;
-inset-24top: -6rem; right: -6rem; bottom: -6rem; left: -6rem;
inset-x-24left: 6rem; right: 6rem;
-inset-x-24left: -6rem; right: -6rem;
inset-y-24top: 6rem; bottom: 6rem;
-inset-y-24top: -6rem; bottom: -6rem;
top-24top: 6rem;
-top-24top: -6rem;
right-24right: 6rem;
-right-24right: -6rem;
bottom-24bottom: 6rem;
-bottom-24bottom: -6rem;
left-24left: 6rem;
-left-24left: -6rem;
inset-28top: 7rem; right: 7rem; bottom: 7rem; left: 7rem;
-inset-28top: -7rem; right: -7rem; bottom: -7rem; left: -7rem;
inset-x-28left: 7rem; right: 7rem;
-inset-x-28left: -7rem; right: -7rem;
inset-y-28top: 7rem; bottom: 7rem;
-inset-y-28top: -7rem; bottom: -7rem;
top-28top: 7rem;
-top-28top: -7rem;
right-28right: 7rem;
-right-28right: -7rem;
bottom-28bottom: 7rem;
-bottom-28bottom: -7rem;
left-28left: 7rem;
-left-28left: -7rem;
inset-32top: 8rem; right: 8rem; bottom: 8rem; left: 8rem;
-inset-32top: -8rem; right: -8rem; bottom: -8rem; left: -8rem;
inset-x-32left: 8rem; right: 8rem;
-inset-x-32left: -8rem; right: -8rem;
inset-y-32top: 8rem; bottom: 8rem;
-inset-y-32top: -8rem; bottom: -8rem;
top-32top: 8rem;
-top-32top: -8rem;
right-32right: 8rem;
-right-32right: -8rem;
bottom-32bottom: 8rem;
-bottom-32bottom: -8rem;
left-32left: 8rem;
-left-32left: -8rem;
inset-36top: 9rem; right: 9rem; bottom: 9rem; left: 9rem;
-inset-36top: -9rem; right: -9rem; bottom: -9rem; left: -9rem;
inset-x-36left: 9rem; right: 9rem;
-inset-x-36left: -9rem; right: -9rem;
inset-y-36top: 9rem; bottom: 9rem;
-inset-y-36top: -9rem; bottom: -9rem;
top-36top: 9rem;
-top-36top: -9rem;
right-36right: 9rem;
-right-36right: -9rem;
bottom-36bottom: 9rem;
-bottom-36bottom: -9rem;
left-36left: 9rem;
-left-36left: -9rem;
inset-40top: 10rem; right: 10rem; bottom: 10rem; left: 10rem;
-inset-40top: -10rem; right: -10rem; bottom: -10rem; left: -10rem;
inset-x-40left: 10rem; right: 10rem;
-inset-x-40left: -10rem; right: -10rem;
inset-y-40top: 10rem; bottom: 10rem;
-inset-y-40top: -10rem; bottom: -10rem;
top-40top: 10rem;
-top-40top: -10rem;
right-40right: 10rem;
-right-40right: -10rem;
bottom-40bottom: 10rem;
-bottom-40bottom: -10rem;
left-40left: 10rem;
-left-40left: -10rem;
inset-44top: 11rem; right: 11rem; bottom: 11rem; left: 11rem;
-inset-44top: -11rem; right: -11rem; bottom: -11rem; left: -11rem;
inset-x-44left: 11rem; right: 11rem;
-inset-x-44left: -11rem; right: -11rem;
inset-y-44top: 11rem; bottom: 11rem;
-inset-y-44top: -11rem; bottom: -11rem;
top-44top: 11rem;
-top-44top: -11rem;
right-44right: 11rem;
-right-44right: -11rem;
bottom-44bottom: 11rem;
-bottom-44bottom: -11rem;
left-44left: 11rem;
-left-44left: -11rem;
inset-48top: 12rem; right: 12rem; bottom: 12rem; left: 12rem;
-inset-48top: -12rem; right: -12rem; bottom: -12rem; left: -12rem;
inset-x-48left: 12rem; right: 12rem;
-inset-x-48left: -12rem; right: -12rem;
inset-y-48top: 12rem; bottom: 12rem;
-inset-y-48top: -12rem; bottom: -12rem;
top-48top: 12rem;
-top-48top: -12rem;
right-48right: 12rem;
-right-48right: -12rem;
bottom-48bottom: 12rem;
-bottom-48bottom: -12rem;
left-48left: 12rem;
-left-48left: -12rem;
inset-52top: 13rem; right: 13rem; bottom: 13rem; left: 13rem;
-inset-52top: -13rem; right: -13rem; bottom: -13rem; left: -13rem;
inset-x-52left: 13rem; right: 13rem;
-inset-x-52left: -13rem; right: -13rem;
inset-y-52top: 13rem; bottom: 13rem;
-inset-y-52top: -13rem; bottom: -13rem;
top-52top: 13rem;
-top-52top: -13rem;
right-52right: 13rem;
-right-52right: -13rem;
bottom-52bottom: 13rem;
-bottom-52bottom: -13rem;
left-52left: 13rem;
-left-52left: -13rem;
inset-56top: 14rem; right: 14rem; bottom: 14rem; left: 14rem;
-inset-56top: -14rem; right: -14rem; bottom: -14rem; left: -14rem;
inset-x-56left: 14rem; right: 14rem;
-inset-x-56left: -14rem; right: -14rem;
inset-y-56top: 14rem; bottom: 14rem;
-inset-y-56top: -14rem; bottom: -14rem;
top-56top: 14rem;
-top-56top: -14rem;
right-56right: 14rem;
-right-56right: -14rem;
bottom-56bottom: 14rem;
-bottom-56bottom: -14rem;
left-56left: 14rem;
-left-56left: -14rem;
inset-60top: 15rem; right: 15rem; bottom: 15rem; left: 15rem;
-inset-60top: -15rem; right: -15rem; bottom: -15rem; left: -15rem;
inset-x-60left: 15rem; right: 15rem;
-inset-x-60left: -15rem; right: -15rem;
inset-y-60top: 15rem; bottom: 15rem;
-inset-y-60top: -15rem; bottom: -15rem;
top-60top: 15rem;
-top-60top: -15rem;
right-60right: 15rem;
-right-60right: -15rem;
bottom-60bottom: 15rem;
-bottom-60bottom: -15rem;
left-60left: 15rem;
-left-60left: -15rem;
inset-64top: 16rem; right: 16rem; bottom: 16rem; left: 16rem;
-inset-64top: -16rem; right: -16rem; bottom: -16rem; left: -16rem;
inset-x-64left: 16rem; right: 16rem;
-inset-x-64left: -16rem; right: -16rem;
inset-y-64top: 16rem; bottom: 16rem;
-inset-y-64top: -16rem; bottom: -16rem;
top-64top: 16rem;
-top-64top: -16rem;
right-64right: 16rem;
-right-64right: -16rem;
bottom-64bottom: 16rem;
-bottom-64bottom: -16rem;
left-64left: 16rem;
-left-64left: -16rem;
inset-72top: 18rem; right: 18rem; bottom: 18rem; left: 18rem;
-inset-72top: -18rem; right: -18rem; bottom: -18rem; left: -18rem;
inset-x-72left: 18rem; right: 18rem;
-inset-x-72left: -18rem; right: -18rem;
inset-y-72top: 18rem; bottom: 18rem;
-inset-y-72top: -18rem; bottom: -18rem;
top-72top: 18rem;
-top-72top: -18rem;
right-72right: 18rem;
-right-72right: -18rem;
bottom-72bottom: 18rem;
-bottom-72bottom: -18rem;
left-72left: 18rem;
-left-72left: -18rem;
inset-80top: 20rem; right: 20rem; bottom: 20rem; left: 20rem;
-inset-80top: -20rem; right: -20rem; bottom: -20rem; left: -20rem;
inset-x-80left: 20rem; right: 20rem;
-inset-x-80left: -20rem; right: -20rem;
inset-y-80top: 20rem; bottom: 20rem;
-inset-y-80top: -20rem; bottom: -20rem;
top-80top: 20rem;
-top-80top: -20rem;
right-80right: 20rem;
-right-80right: -20rem;
bottom-80bottom: 20rem;
-bottom-80bottom: -20rem;
left-80left: 20rem;
-left-80left: -20rem;
inset-96top: 24rem; right: 24rem; bottom: 24rem; left: 24rem;
-inset-96top: -24rem; right: -24rem; bottom: -24rem; left: -24rem;
inset-x-96left: 24rem; right: 24rem;
-inset-x-96left: -24rem; right: -24rem;
inset-y-96top: 24rem; bottom: 24rem;
-inset-y-96top: -24rem; bottom: -24rem;
top-96top: 24rem;
-top-96top: -24rem;
right-96right: 24rem;
-right-96right: -24rem;
bottom-96bottom: 24rem;
-bottom-96bottom: -24rem;
left-96left: 24rem;
-left-96left: -24rem;
inset-autotop: auto; right: auto; bottom: auto; left: auto;
inset-1/2top: 50%; right: 50%; bottom: 50%; left: 50%;
inset-1/3top: 33.333333%; right: 33.333333%; bottom: 33.333333%; left: 33.333333%;
inset-2/3top: 66.666667%; right: 66.666667%; bottom: 66.666667%; left: 66.666667%;
inset-1/4top: 25%; right: 25%; bottom: 25%; left: 25%;
inset-2/4top: 50%; right: 50%; bottom: 50%; left: 50%;
inset-3/4top: 75%; right: 75%; bottom: 75%; left: 75%;
inset-fulltop: 100%; right: 100%; bottom: 100%; left: 100%;
-inset-1/2top: -50%; right: -50%; bottom: -50%; left: -50%;
-inset-1/3top: -33.333333%; right: -33.333333%; bottom: -33.333333%; left: -33.333333%;
-inset-2/3top: -66.666667%; right: -66.666667%; bottom: -66.666667%; left: -66.666667%;
-inset-1/4top: -25%; right: -25%; bottom: -25%; left: -25%;
-inset-2/4top: -50%; right: -50%; bottom: -50%; left: -50%;
-inset-3/4top: -75%; right: -75%; bottom: -75%; left: -75%;
-inset-fulltop: -100%; right: -100%; bottom: -100%; left: -100%;
inset-x-autoleft: auto; right: auto;
inset-x-1/2left: 50%; right: 50%;
inset-x-1/3left: 33.333333%; right: 33.333333%;
inset-x-2/3left: 66.666667%; right: 66.666667%;
inset-x-1/4left: 25%; right: 25%;
inset-x-2/4left: 50%; right: 50%;
inset-x-3/4left: 75%; right: 75%;
inset-x-fullleft: 100%; right: 100%;
-inset-x-1/2left: -50%; right: -50%;
-inset-x-1/3left: -33.333333%; right: -33.333333%;
-inset-x-2/3left: -66.666667%; right: -66.666667%;
-inset-x-1/4left: -25%; right: -25%;
-inset-x-2/4left: -50%; right: -50%;
-inset-x-3/4left: -75%; right: -75%;
-inset-x-fullleft: -100%; right: -100%;
inset-y-autotop: auto; bottom: auto;
inset-y-1/2top: 50%; bottom: 50%;
inset-y-1/3top: 33.333333%; bottom: 33.333333%;
inset-y-2/3top: 66.666667%; bottom: 66.666667%;
inset-y-1/4top: 25%; bottom: 25%;
inset-y-2/4top: 50%; bottom: 50%;
inset-y-3/4top: 75%; bottom: 75%;
inset-y-fulltop: 100%; bottom: 100%;
-inset-y-1/2top: -50%; bottom: -50%;
-inset-y-1/3top: -33.333333%; bottom: -33.333333%;
-inset-y-2/3top: -66.666667%; bottom: -66.666667%;
-inset-y-1/4top: -25%; bottom: -25%;
-inset-y-2/4top: -50%; bottom: -50%;
-inset-y-3/4top: -75%; bottom: -75%;
-inset-y-fulltop: -100%; bottom: -100%;
top-autotop: auto;
top-1/2top: 50%;
top-1/3top: 33.333333%;
top-2/3top: 66.666667%;
top-1/4top: 25%;
top-2/4top: 50%;
top-3/4top: 75%;
top-fulltop: 100%;
-top-1/2top: -50%;
-top-1/3top: -33.333333%;
-top-2/3top: -66.666667%;
-top-1/4top: -25%;
-top-2/4top: -50%;
-top-3/4top: -75%;
-top-fulltop: -100%;
right-autoright: auto;
right-1/2right: 50%;
right-1/3right: 33.333333%;
right-2/3right: 66.666667%;
right-1/4right: 25%;
right-2/4right: 50%;
right-3/4right: 75%;
right-fullright: 100%;
-right-1/2right: -50%;
-right-1/3right: -33.333333%;
-right-2/3right: -66.666667%;
-right-1/4right: -25%;
-right-2/4right: -50%;
-right-3/4right: -75%;
-right-fullright: -100%;
bottom-autobottom: auto;
bottom-1/2bottom: 50%;
bottom-1/3bottom: 33.333333%;
bottom-2/3bottom: 66.666667%;
bottom-1/4bottom: 25%;
bottom-2/4bottom: 50%;
bottom-3/4bottom: 75%;
bottom-fullbottom: 100%;
-bottom-1/2bottom: -50%;
-bottom-1/3bottom: -33.333333%;
-bottom-2/3bottom: -66.666667%;
-bottom-1/4bottom: -25%;
-bottom-2/4bottom: -50%;
-bottom-3/4bottom: -75%;
-bottom-fullbottom: -100%;
left-autoleft: auto;
left-1/2left: 50%;
left-1/3left: 33.333333%;
left-2/3left: 66.666667%;
left-1/4left: 25%;
left-2/4left: 50%;
left-3/4left: 75%;
left-fullleft: 100%;
-left-1/2left: -50%;
-left-1/3left: -33.333333%;
-left-2/3left: -66.666667%;
-left-1/4left: -25%;
-left-2/4left: -50%;
-left-3/4left: -75%;
-left-fullleft: -100%;

Usage

Use the {top|right|bottom|left|inset}-0 utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent.

Combined with Tailwind’s padding and margin utilities, you’ll probably find that these are all you need to precisely control absolutely positioned elements.

Top / Right / Bottom / Left - 图1

  1. <!-- Span top edge -->
  2. <div class="relative h-32 w-32 ...">
  3. <div class="absolute inset-x-0 top-0 h-16 ...">1</div>
  4. </div>
  5. <!-- Span right edge -->
  6. <div class="relative h-32 w-32 ...">
  7. <div class="absolute inset-y-0 right-0 w-16 ...">2</div>
  8. </div>
  9. <!-- Span bottom edge -->
  10. <div class="relative h-32 w-32 ...">
  11. <div class="absolute inset-x-0 bottom-0 h-16 ...">3</div>
  12. </div>
  13. <!-- Span left edge -->
  14. <div class="relative h-32 w-32 ...">
  15. <div class="absolute inset-y-0 left-0 w-16 ...">4</div>
  16. </div>
  17. <!-- Fill entire parent -->
  18. <div class="relative h-32 w-32 ...">
  19. <div class="absolute inset-0 ...">5</div>
  20. </div>
  21. <!-- Pin to top left corner -->
  22. <div class="relative h-32 w-32 ...">
  23. <div class="absolute left-0 top-0 h-16 w-16 ...">6</div>
  24. </div>
  25. <!-- Pin to top right corner -->
  26. <div class="relative h-32 w-32 ...">
  27. <div class="absolute top-0 right-0 h-16 w-16 ...">7</div>
  28. </div>
  29. <!-- Pin to bottom right corner -->
  30. <div class="relative h-32 w-32 ...">
  31. <div class="absolute bottom-0 right-0 h-16 w-16 ...">8</div>
  32. </div>
  33. <!-- Pin to bottom left corner -->
  34. <div class="relative h-32 w-32 ...">
  35. <div class="absolute bottom-0 left-0 h-16 w-16 ...">9</div>
  36. </div>

Responsive

To position an element only at a specific breakpoint, add a {screen}: prefix to any existing positioning utility. For example, adding the class md:inset-y-0 to an element would apply the inset-y-0 utility at medium screen sizes and above.

  1. <div class="relative h-32 ...">
  2. <div class="absolute inset-0 md:inset-y-0 ..."></div>
  3. </div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Top / Right / Bottom / Left scale

By default, Tailwind provides top/right/bottom/left/inset utilities for a combination of the default spacing scale, auto, full as well as some additional fraction values.

You can change, add, or remove these by editing the theme.inset section of your tailwind.config.js file.

  1. // tailwind.config.js
  2. module.exports = {
  3. theme: {
  4. inset: {
  5. '0': 0,
  6. // ...
  7. - '64': '16rem',
  8. + '1/5': '20%',
  9. }
  10. }
  11. }

Negative values

If you’d like to add any negative top/right/bottom/left classes that take the same form as Tailwind’s negative margin classes, prefix the keys in your config file with a dash:

  1. // tailwind.config.js
  2. module.exports = {
  3. theme: {
  4. extend: {
  5. inset: {
  6. + '-16': '-4rem',
  7. }
  8. }
  9. }
  10. }

Tailwind is smart enough to generate classes like -top-16 when it sees the leading dash, not top--16 like you might expect.

Variants

By default, only responsive variants are generated for top, right, bottom, left, and inset utilities.

You can control which variants are generated for the top, right, bottom, left, and inset utilities by modifying the inset property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  1. // tailwind.config.js
  2. module.exports = {
  3. variants: {
  4. extend: {
  5. // ...
  6. + inset: ['hover', 'focus'],
  7. }
  8. }
  9. }

Disabling

If you don’t plan to use the top, right, bottom, left, and inset utilities in your project, you can disable them entirely by setting the inset property to false in the corePlugins section of your config file:

  1. // tailwind.config.js
  2. module.exports = {
  3. corePlugins: {
  4. // ...
  5. + inset: false,
  6. }
  7. }

←Position Visibility→

Edit this page on GitHub