Layout
Position
Tailwind ផ្តល់ position utilities សម្រាប់ positioning elements: static, relative, absolute, fixed, និង sticky។
📍 Position Types
| Class | CSS Value | Behavior | Common Use |
|---|---|---|---|
static |
position: static; |
Normal document flow (default) | Default positioning |
relative |
position: relative; |
Positioned relative to itself, creates positioning context | Parent for absolute children |
absolute |
position: absolute; |
Removed from flow, positioned relative to nearest positioned ancestor | Overlays, tooltips, badges |
fixed |
position: fixed; |
Fixed to viewport (stays during scroll) | Headers, sticky nav, modals |
sticky |
position: sticky; |
Relative until scroll threshold, then fixed | Sticky headers, sidebars |
🎯 Position Offsets (Inset)
Combine with top, right, bottom, left utilities:
| Class Pattern | CSS Properties | Example |
|---|---|---|
inset-0 |
top: 0; right: 0; bottom: 0; left: 0; |
Fill entire parent (overlay) |
inset-x-0 |
left: 0; right: 0; |
Stretch horizontally |
inset-y-0 |
top: 0; bottom: 0; |
Stretch vertically |
top-0, right-0, bottom-0, left-0 |
Individual sides | Precise positioning |
-top-4, -left-2 |
Negative values | Pull element outside parent |
📚 Z-Index (Stacking Order)
| Class | Z-Index Value | Typical Use |
|---|---|---|
z-0 |
0 | Default layer |
z-10 |
10 | Content layer |
z-20 |
20 | Dropdowns |
z-30 |
30 | Sticky headers |
z-40 |
40 | Fixed navigation |
z-50 |
50 | Modals, overlays |
z-auto |
auto | Browser default stacking |
Container & Display
Container utilities និង display properties សម្រាប់ layout control។
📦 Container
| Breakpoint | Max Width | Screen Size |
|---|---|---|
| None | 100% | < 640px |
| sm | 640px | ≥ 640px |
| md | 768px | ≥ 768px |
| lg | 1024px | ≥ 1024px |
| xl | 1280px | ≥ 1280px |
| 2xl | 1536px | ≥ 1536px |
👁️ Display Properties
| Class | CSS Value | Behavior |
|---|---|---|
block |
display: block; |
Full width, new line |
inline-block |
display: inline-block; |
Inline but accepts width/height |
inline |
display: inline; |
Inline with text |
flex |
display: flex; |
Flexbox layout |
inline-flex |
display: inline-flex; |
Inline flexbox |
grid |
display: grid; |
Grid layout |
inline-grid |
display: inline-grid; |
Inline grid |
hidden |
display: none; |
Hide element |
🖼️ Object Fit (For Images)
| Class | CSS Value | Behavior |
|---|---|---|
object-contain |
object-fit: contain; |
Fit entire image (may have gaps) |
object-cover |
object-fit: cover; |
Fill container (may crop) |
object-fill |
object-fit: fill; |
Stretch to fill (may distort) |
object-none |
object-fit: none; |
Original size (may crop) |
object-scale-down |
object-fit: scale-down; |
Smaller of none or contain |
📜 Overflow
| Class | CSS Value | Behavior |
|---|---|---|
overflow-auto |
overflow: auto; |
Scroll if needed |
overflow-hidden |
overflow: hidden; |
Hide overflow content |
overflow-visible |
overflow: visible; |
Show overflow (default) |
overflow-scroll |
overflow: scroll; |
Always show scrollbar |
overflow-x-auto |
overflow-x: auto; |
Horizontal scroll if needed |
overflow-y-auto |
overflow-y: auto; |
Vertical scroll if needed |