Nearby lessons
26 of 61📍 Tailwind CSS - Position
📖 Position Overview
Position utilities in Tailwind CSS allow you to control how elements are positioned in the document flow. These utilities provide complete control over element placement using CSS positioning properties.
Tailwind offers static, relative, absolute, fixed, and sticky positioning, along with comprehensive utilities for top, right, bottom, and left placement.
🎯 Basic Position Classes
The basic position utilities follow the pattern position-{type} where type can be
static, relative, absolute, fixed, or sticky. Each positioning type has specific use cases.
📐 Placement Utilities
Placement utilities control the position of elements using top, right, bottom, and left properties. These work with relative, absolute, fixed, and sticky positioning.
🎨 Relative Positioning
Relative positioning allows you to position an element relative to its normal position in the document flow. The space the element would have occupied is preserved.
🎯 Absolute Positioning
Absolute positioning removes an element from the normal document flow and positions it relative to its nearest positioned ancestor. If no positioned ancestor exists, it's positioned relative to the initial containing block.
📌 Fixed Positioning
Fixed positioning removes an element from the normal document flow and positions it relative to the viewport. The element stays in the same position even when the page is scrolled.
🔄 Sticky Positioning
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it reaches a specified scroll position, then it becomes fixed.
📱 Responsive Position
Position utilities can be applied responsively using breakpoint prefixes. This allows you to change positioning behavior based on screen size.
🔧 Inset Utilities
Inset utilities provide shorthand for setting top, right, bottom, and left properties simultaneously. This is useful for positioning elements that need consistent spacing from all edges.