ទីតាំង
សេចក្តីផ្តើម
Property position ក្នុង CSS គឺជាមធ្យោបាយសំខាន់មួយក្នុងការគ្រប់គ្រងទីតាំងនៃធាតុ HTML លើទំព័រ។ វាអនុញ្ញាតឱ្យយើងផ្លាស់ប្តូររបៀបដែលធាតុត្រូវបានដាក់តាំងនិងបង្ហាញក្នុងទំព័រគេហទំព័រ។
តម្លៃសំខាន់ៗទាំង៥នៃ Position
- static - ទីតាំងធម្មតា (លំនាំដើម)
- relative - ទីតាំងទាក់ទង
- absolute - ទីតាំងដាច់ខាត
- fixed - ទីតាំងជាប់
- sticky - ទីតាំងស្អិត
1. Position: Static (លំនាំដើម)
តម្លៃ static គឺជាតម្លៃលំនាំដើមសម្រាប់ធាតុទាំងអស់។ ធាតុដែលមាន position: static នឹងត្រូវបានដាក់តាំងតាមលំហូរធម្មតានៃទំព័រ (normal document flow)។
ចំណាំ: properties ដូចជា top, right, bottom, left និង z-index មិនធ្វើការជាមួយ position: static ទេ។
2. Position: Relative (ទីតាំងទាក់ទង)
ធាតុជាមួយនឹង position: relative គឺមានទីតាំងទាក់ទងទៅនឹងទីតាំងធម្មតារបស់វាផ្ទាល់។ នៅពេលកំណត់ top, right, bottom ឬ left ធាតុនឹងរំកិលចេញពីទីតាំងដើមរបស់វា ប៉ុន្តែកន្លែងដើមនៅតែបម្រុងទុកដដែល។
ចំណុចសំខាន់៖
- ធាតុផ្សេងទៀតនៅតែមើលឃើញកន្លែងដើមរបស់វា
- គិតចាប់ពីចំណុចដែលវាគួរតែស្ថិតនៅ (normal position)
- ប្រើជាមួយ
z-indexដើម្បីគ្រប់គ្រងស្រទាប់ - តែងត្រូវបានប្រើជា parent ក្នុងការដាក់ absolute children
3. Position: Absolute (ទីតាំងដាច់ខាត)
ធាតុជាមួយនឹង position: absolute ត្រូវបានដកចេញពីលំហូរធម្មតានៃទំព័រ។ វាមិនបម្រុងទុកកន្លែងក្នុង layout ទៀតទេ។
ចំណុចសំខាន់៖
- គិតទីតាំងពី positioned ancestor ដែលជិតបំផុត (parent ដែលមាន position ខុសពី static)
- បើគ្មាន positioned ancestor វានឹងគិតពី document body
- ធាតុផ្សេងមើលមិនឃើញកន្លែងរបស់វាទេ
- ល្អសម្រាប់បង្កើត overlays, tooltips, modals
4. Position: Fixed (ទីតាំងជាប់)
ធាតុជាមួយនឹង position: fixed ត្រូវបានដកចេញពីលំហូរធម្មតា ហើយវានឹងស្ថិតនៅទីតាំងជាក់លាក់មួយទាក់ទងនឹង viewport ទោះបីជាយើងរំកិលទំព័រក៏ដោយ។
ចំណុចសំខាន់៖
- តែងតែគិតទីតាំងពី viewport (ផ្ទាំងបង្ហាញ)
- មិនរំកិលតាមទំព័រទេ
- ល្អសម្រាប់ navigation bars, floating buttons, headers
- មិនប៉ះពាល់ដោយ parent position
5. Position: Sticky (ទីតាំងស្អិត)
តម្លៃ sticky គឺជាការរួមបញ្ចូលគ្នារវាង relative និង fixed។ ធាតុនឹងធ្វើឱ្យដូចជា relative រហូតដល់វាឈានដល់ចំណុចមួយនៅពេលរំកិល បន្ទាប់មកវានឹងក្លាយជា fixed។
ចំណុចសំខាន់៖
- ចាប់ផ្តើមដូចជា
relative - ក្លាយជា
fixedនៅពេលរំកិលដល់ threshold ដែលកំណត់ - ត្រូវការយ៉ាងហោចណាស់មួយក្នុងចំណោម:
top,right,bottom,left - ល្អសម្រាប់ sticky headers, navigation menus
ការប្រើប្រាស់ Top, Right, Bottom, Left
Properties ទាំងនេះកំណត់ទីតាំងពិតប្រាកដនៃធាតុដែលមាន position។ វាធ្វើការខុសៗគ្នាអាស្រ័យលើប្រភេទ position៖
| Position | គិតទីតាំងពី | លំហូរទំព័រ | រំកិលតាម |
|---|---|---|---|
static |
មិនធ្វើការ | បាទ/ចាស | បាទ/ចាស |
relative |
ទីតាំងដើមរបស់វា | បាទ/ចាស (បម្រុងកន្លែង) | បាទ/ចាស |
absolute |
Positioned ancestor | ទេ | បាទ/ចាស |
fixed |
Viewport | ទេ | ទេ |
sticky |
Viewport + Parent | បាទ/ចាស (ដើមឡើយ) | មាន (រហូតដល់ជាប់) |
Z-Index និងការគ្រប់គ្រងស្រទាប់
Property z-index គ្រប់គ្រងលំដាប់ជង់នៃធាតុដែល overlap គ្នា។ វាធ្វើការតែជាមួយធាតុដែលមាន position (មិនមែន static)។
ច្បាប់សំខាន់ៗ៖
- តម្លៃខ្ពស់ជាង = នៅលើគេ
- តម្លៃអាចជាលេខអវិជ្ជមាន
- តម្លៃលំនាំដើមគឺ
auto(ដូចជា 0) - ធាតុក្រោយនៅលើធាតុមុន បើ z-index ដូចគ្នា
ឧទាហរណ៍ជាក់ស្តែង - Card with Badge
ឧទាហរណ៍នេះបង្ហាញការប្រើប្រាស់ relative និង absolute ដើម្បីបង្កើត badge នៅលើ card។
ឧទាហរណ៍ជាក់ស្តែង - Modal/Overlay
ឧទាហរណ៍នេះបង្ហាញការបង្កើត modal dialog ដោយប្រើ fixed position និង z-index។
ឧទាហរណ៍ជាក់ស្តែង - Sticky Navigation
ឧទាហរណ៍នេះបង្ហាញ navigation bar ដែល sticky នៅពេលរំកិល។
ករណីប្រើប្រាស់ទូទៅ (Common Use Cases)
1. Tooltips និង Dropdowns
ប្រើ relative លើ parent និង absolute លើ tooltip/dropdown ដើម្បីដាក់វានៅទីតាំងត្រឹមត្រូវ។
2. Fixed Headers/Footers
ប្រើ fixed ដើម្បីធ្វើឱ្យ header ឬ footer នៅជាប់លើផ្ទាំងបង្ហាញ។
3. Sticky Table Headers
ប្រើ sticky លើ <thead> ដើម្បីធ្វើឱ្យ header នៅជាប់នៅពេលរំកិលតារាង។
4. Overlays និង Modals
ប្រើ fixed ជាមួយ z-index ខ្ពស់ដើម្បីបង្កើត overlay ដែលគ្របពេញផ្ទាំងបង្ហាញ។
5. Badges និង Notifications
ប្រើ relative + absolute ដើម្បីដាក់ badge នៅជ្រុងធាតុមួយ។
ចំណាំសំខាន់និងបញ្ហាទូទៅ
⚠️ បញ្ហាទូទៅ
- Absolute ទៅខុសទី: ត្រូវប្រាកដថា parent មាន
position: relative - Z-index មិនធ្វើការ: ត្រូវប្រាកដថាធាតុមាន position (មិនមែន static)
- Fixed element គ្របខ្លឹមសារ: កុំភ្លេចបន្ថែម padding/margin ដល់ body
- Sticky មិនធ្វើការ: ត្រូវការ top/bottom/left/right និង parent ត្រូវមានកម្ពស់គ្រប់គ្រាន់
✅ ការអនុវត្តល្អបំផុត (Best Practices)
- ប្រើ
relativeលើ parent នៅពេលប្រើabsoluteលើ child - ចៀសវាងការប្រើ
absoluteនិងfixedច្រើនពេកព្រោះបង្កភាពស្មុគស្មាញ - ប្រើ
stickyជំនួសfixedនៅពេលអាច ដើម្បីទទួលបាន UX ល្អជាង - តែងតែសាកល្បងលើ devices និង screen sizes ផ្សេងៗ
- ប្រើ
z-indexតាមប្រព័ន្ធច្បាស់លាស់ (ឧ. 10, 20, 30...) មិនមែន 999999
សង្ខេប: Position property គឺជាឧបករណ៍មានឥទ្ធិពលខ្លាំងក្នុង CSS layout។ ការយល់ដឹងអំពីភាពខុសគ្នារវាង relative, absolute, fixed និង sticky នឹងជួយអ្នកបង្កើត layouts ស្មុគស្មាញនិងទំនើបបាន។ ចាំថា: static គឺលំនាំដើម, relative បម្រុងកន្លែង, absolute និង fixed មិនបម្រុងកន្លែង, ហើយ sticky រួមបញ្ចូលគុណសម្បត្តិពីរ។