Position

    Utilities for controlling how an element is positioned in the DOM.

    Use to position an element according to the normal flow of the document.

    Any will be ignored and the element will not act as a position reference for absolutely positioned children.

    Relatively positioning elements

    Use relative to position an element according to the normal flow of the document.

    Any are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.

    1.   <p>Relative parent</p>
    2.   <div class="absolute bottom-0 left-0 ...">
    3.     <p>Absolute child</p>
    4.   </div>
    5. </div>

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

    Any are calculated relative to the nearest parent that has a position other than static, and the element will act as a position reference for other absolutely positioned children.

    Position - 图3

    Fixed positioning elements

    Use fixed to position an element relative to the browser window.

    Any are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.

    2.   <div class="fixed top-0 left-0 right-0">Contacts</div>
    3.   <div>
    4.     <div>
    5.       <img src="..." />
    6.     </div>
    7.     <div>
    8.       <img src="..." />
    9.       <strong>Debra Houston</strong>
    10.     </div>
    12.   </div>
    13. </div>

    Any are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.

    Position - 图5

    Hover, focus, and other states

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:absolute to only apply the absolute utility on hover.

    1. <div class="relative hover:absolute">
    2.   <!-- ... -->

    For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

    You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:absolute to apply the utility at only medium screen sizes and above.

    To learn more, check out the documentation on Responsive Design, and other media query modifiers.