Use the absolute utility to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist:

Use top-<number>, right-<number>, bottom-<number>, left-<number>, and inset-<number> utilities like top-0 and bottom-4 to set the horizontal or vertical position of a positioned element:

Use .relative to position an element according to the normal flow of the document. Offsets are calculated relative to the element's normal position and the element will act as a position …

Use fixed to position an element relative to the browser window. Offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.

Use the relative utility to position an element according to the normal flow of the document. Any offsets are calculated relative to the element’s normal position and the element will act as a …

object-position. Utilities for controlling how a replaced element's content should be positioned within its container.

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 …

By default, Tailwind provides nine object position utilities. You can customize these values by editing theme.objectPosition or theme.extend.objectPosition in your tailwind.config.js file.

Setting the background position. Use utilities like bg-center, bg-right, and bg-left-top to the position of an element’s background image.

Use the top-*, right-*, bottom-*, left-*, and inset-* utilities to set the horizontal or vertical position of a positioned element.