Positioning and Z-Index
Positioning
Use static, relative, absolute, fixed, or sticky for positioning.
Control placement with top-, right-, bottom-, left- classes.
- Static: No positioning is applied; they will appear in the order they are defined in the HTML.
- Relative: An element is positioned relative to its normal position in the document flow.
- Absolute: An element is positioned relative to the nearest positioned ancestor (an ancestor with a position of relative, absolute, fixed, or sticky). If no such ancestor exists, it will be positioned relative to the initial containing block (usually the viewport).
- Fixed: An element is positioned relative to the viewport, meaning it stays in the same place even when the page is scrolled.
- Sticky: An element is treated as relative until it crosses a specified threshold (using top, right, bottom, or left), at which point it becomes fixed within its parent container.
Example:
<div class="relative h-32">
<div class="absolute top-0 right-0">Top right corner</div>
</div>
Z-Index
Z-index is a CSS property used to determine the stacking order of elements that overlap. It specifies the position of an element relative to other elements on the same z-axis. Elements with a higher z-index value will appear on top of elements with a lower z-index value.
Z-index can be used to create complex visual effects, such as tooltips, pop-ups, and modal windows.
Control stacking order with z- classes.
Available values include z-0, z-10, z-20, up to z-50, and z-auto.
Example:
<div class="z-10 relative">Above normal flow</div>