Position Types Control how elements are positioned with position utilities.
Position Types .staticStatic position: static;Default positioning .relativeRelative position: relative;Position relative to normal flow .absoluteAbsolute position: absolute;Position relative to nearest positioned ancestor .fixedFixed position: fixed;Position relative to viewport .stickySticky position: sticky;Sticky positioning
Examples <!-- Position examples --> < div class = "static p-4 bg-blue text-white" > Static positioning (default) </ div > < div class = "relative p-4 bg-green text-white" > Relative positioning </ div > < div class = "absolute p-4 bg-red text-white" > Absolute positioning </ div > < div class = "fixed p-4 bg-yellow text-black" > Fixed positioning </ div > < div class = "sticky p-4 bg-purple text-white" > Sticky positioning </ div > Z-Index Control stacking order with z-index utilities.
Z-Index Levels .z-00 z-index: 0;Base level .z-1010 z-index: 10;Low priority .z-2020 z-index: 20;Medium priority .z-5050 z-index: 50;High priority .z-100100 z-index: 100;Highest priority
Automatic Positioning: Z-index utilities automatically add position: relative when imported to ensure proper display in Elementor’s UI.
Examples <!-- Z-index examples --> < div class = "relative z-0 p-4 bg-gray text-white" > Base layer (z-0) </ div > < div class = "relative z-10 p-4 bg-blue text-white" > Low priority (z-10) </ div > < div class = "relative z-20 p-4 bg-green text-white" > Medium priority (z-20) </ div > < div class = "relative z-50 p-4 bg-red text-white" > High priority (z-50) </ div > < div class = "relative z-100 p-4 bg-yellow text-black" > Highest priority (z-100) </ div > Common Positioning Patterns Overlay Elements
Image Overlay < div class = "relative" > < img src = "image.jpg" class = "w-full h-64 object-cover" alt = "Background image" > < div class = "absolute inset-0 bg-black opacity-50" ></ div > < div class = "absolute inset-0 flex items-center justify-center" > < h2 class = "text-white text-2xl font-700" > Overlay Text </ h2 > </ div > </ div >
Fixed Navigation < header class = "fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-light" > < div class = "flex items-center justify-between p-4" > < h1 class = "text-xl font-700" > Logo </ h1 > < nav class = "flex gap-6" > < a href = "#" class = "text-gray" > Home </ a > < a href = "#" class = "text-gray" > About </ a > < a href = "#" class = "text-gray" > Contact </ a > </ nav > </ div > </ header > < main class = "pt-16" > < div class = "p-6" > < h2 class = "text-2xl font-600 mb-4" > Main Content </ h2 > < p class = "text-gray" > Content goes here... </ p > </ div > </ main >
Sticky Sidebar < div class = "flex gap-6" > < aside class = "w-64 sticky top-0 h-screen overflow-y-auto" > < div class = "p-6 bg-gray-light" > < h2 class = "text-lg font-600 mb-4" > Sidebar </ h2 > < nav class = "flex flex-col gap-2" > < a href = "#" class = "text-gray" > Link 1 </ a > < a href = "#" class = "text-gray" > Link 2 </ a > < a href = "#" class = "text-gray" > Link 3 </ a > </ nav > </ div > </ aside > < main class = "flex-1 p-6" > < h1 class = "text-3xl font-700 mb-6" > Main Content </ h1 > < p class = "text-gray mb-4" > Content goes here... </ p > </ main > </ div > Modal Dialog
Modal Dialog < div class = "fixed inset-0 z-50 flex items-center justify-center" > <!-- Backdrop --> < div class = "absolute inset-0 bg-black opacity-50" ></ div > <!-- Modal --> < div class = "relative bg-white rounded-lg p-6 max-w-md w-full mx-4" > < h3 class = "text-xl font-600 mb-4" > Modal Title </ h3 > < p class = "text-gray mb-6" > Modal content goes here. </ p > < div class = "flex gap-4 justify-end" > < button class = "btn bg-gray text-white" > Cancel </ button > < button class = "btn btn-blue" > Confirm </ button > </ div > </ div > </ div > Positioning with Flexbox Centered Content
Centered Content < div class = "flex items-center justify-center min-h-screen" > < div class = "text-center" > < h1 class = "text-4xl font-700 mb-4" > Centered Content </ h1 > < p class = "text-lg text-gray mb-8" > This content is perfectly centered </ p > < button class = "btn btn-blue" > Get Started </ button > </ div > </ div > Absolute Positioning within Flex
Flex with Absolute Elements < div class = "flex items-center justify-center h-64 bg-gray-light relative" > < div class = "text-center" > < h2 class = "text-2xl font-600 mb-4" > Flex Container </ h2 > < p class = "text-gray" > Content in flex container </ p > </ div > <!-- Absolutely positioned elements --> < div class = "absolute top-4 right-4 bg-red text-white px-3 py-1 rounded text-sm" > Top Right </ div > < div class = "absolute bottom-4 left-4 bg-blue text-white px-3 py-1 rounded text-sm" > Bottom Left </ div > </ div > Z-Index Layering Card Stacking
Stacked Cards < div class = "relative" > <!-- Base card --> < div class = "relative z-0 p-6 bg-white rounded-lg border border-gray-light" > < h3 class = "text-lg font-600 mb-2" > Base Card </ h3 > < p class = "text-gray" > This is the base layer </ p > </ div > <!-- Overlay card --> < div class = "absolute top-4 right-4 z-10 p-4 bg-blue text-white rounded-lg" > < p class = "text-sm font-600" > Overlay </ p > </ div > <!-- Top card --> < div class = "absolute top-8 right-8 z-20 p-2 bg-red text-white rounded text-xs" > Top </ div > </ div >
Dropdown Menu < div class = "relative" > < button class = "btn btn-blue" > Menu </ button > <!-- Dropdown --> < div class = "absolute top-full left-0 z-50 mt-2 w-48 bg-white rounded-lg border border-gray-light shadow-lg" > < div class = "p-2" > < a href = "#" class = "block px-4 py-2 text-gray hover:bg-gray-light rounded" > Option 1 </ a > < a href = "#" class = "block px-4 py-2 text-gray hover:bg-gray-light rounded" > Option 2 </ a > < a href = "#" class = "block px-4 py-2 text-gray hover:bg-gray-light rounded" > Option 3 </ a > </ div > </ div > </ div > Positioning Best Practices Z-Index Management
Use Consistent Z-Index Scale
Stick to the predefined z-index values (0, 10, 20, 50, 100) for consistency.
Plan Your Layers
Think about the stacking order before implementing positioning.
Use Relative Positioning
Use relative positioning for z-index to work properly.
Test on Different Devices
Ensure positioning works correctly on mobile and desktop.
Performance Tips
Use position: fixed sparingly as it can cause performance issues - Avoid
deeply nested positioned elements - Test sticky positioning on different
browsers - Use transform instead of position for animations when possible
Common Use Cases
Tooltip < div class = "relative group" > < button class = "btn btn-blue" > Hover for tooltip </ button > <!-- Tooltip --> < div class = "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 z-50 opacity-0 group-hover:opacity-100 transition-opacity" > < div class = "bg-black text-white text-sm px-3 py-2 rounded" > Tooltip content </ div > < div class = "absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-black" ></ div > </ div > </ div >
Floating Action Button < div class = "fixed bottom-6 right-6 z-50" > < button class = "w-14 h-14 bg-blue text-white rounded-full shadow-lg hover:bg-blue-dark transition-colors" > < span class = "text-2xl" > + </ span > </ button > </ div >
Sticky Table Header < div class = "overflow-x-auto" > < table class = "w-full" > < thead class = "sticky top-0 bg-white z-10" > < tr class = "border-b border-gray-light" > < th class = "text-left p-4 font-600" > Name </ th > < th class = "text-left p-4 font-600" > Email </ th > < th class = "text-left p-4 font-600" > Status </ th > </ tr > </ thead > < tbody > < tr class = "border-b border-gray-light" > < td class = "p-4" > John Doe </ td > < td class = "p-4" > john@example.com </ td > < td class = "p-4" > Active </ td > </ tr > <!-- More rows... --> </ tbody > </ table > </ div > 
