ទីតាំង

ការរៀបចំទីតាំង (CSS Position)

នេះជាមេរៀនដែលរាងស្មុគស្មាញបន្តិច តែបើអ្នកយល់វា នោះអ្នកអាចចាប់ទាញ Elements ទៅដាក់នៅទីណាក៏បាននៅលើអេក្រង់! យើងប្រើ Property position និងកំណត់ទីតាំងដោយប្រើ top, bottom, left, right។

១. ទីតាំងធម្មតា (Static)

គ្រប់ Elements ទាំងអស់តាមលំនាំដើមគឺ position: static;។ វាមានន័យថា វាហូរតាមលំដាប់លំដោយរបស់ HTML។ បើអ្នកប្រើ top ឬ left គឺគ្មានឥទ្ធិពលអ្វីទាំងអស់។

២. ទីតាំងធៀបនឹងកន្លែងចាស់ (Relative)

position: relative; អនុញ្ញាតអោយអ្នករុញ Element នោះចេញពីកន្លែងចាស់របស់វា (ឧ. រុញទៅស្តាំ 20px) ប៉ុន្តែទីតាំងចាស់របស់វានៅតែទុកកន្លែងទំនេរដដែល។ អ្វីដែលសំខាន់បំផុតគឺ គេប្រើវាធ្វើជា មេ ដើម្បីអោយ absolute (កូន) តោង!

៣. ទីតាំងឯករាជ្យ (Absolute) - ប្រើញឹកញាប់បំផុត!

position: absolute; គឺដូចជាការដក Element នោះចេញពីទំព័រ ហោះអណ្តែតពីលើគេ។ វានឹងរត់ទៅតោង មេរបស់វា ណាដែលមាន position relative (បើគ្មានមេទេ វានឹងតោងអេក្រង់វិបសាយទាំងមូល!)។

គេប្រើវាសម្រាប់ធ្វើជា Badge លេខពណ៌ក្រហម (ឧ. មានសារថ្មី ៣) លោតនៅជ្រុងខាងស្តាំនៃរូបកណ្តឹង។

៤. ទីតាំងស្អិតជាប់អេក្រង់ (Fixed & Sticky)

• position: fixed; : ហោះអណ្តែត និង នៅស្ងៀមថ្កល់ ទោះបីជាអ្នក Scroll អូសអត្ថបទចុះក្រោមក៏ដោយ! គេនិយមប្រើវាសម្រាប់ធ្វើជា "របារម៉ឺនុយខាងលើ" (Header Menu) ដែលតាមយើងរហូត។
• position: sticky; : ពេលអូសចុះក្រោម វានឹងរំកិលតាមធម្មតា រហូតដល់វាប៉ះគែមខាងលើអេក្រង់ វានឹងប្រែជា Fixed ជាប់ថ្កល់នៅទីនោះ!

៥. ឋានានុក្រមនៃភាពត្រួតស៊ីគ្នា (Z-Index)

នៅពេលអ្នកអោយ Element ហោះអណ្តែត ពួកវាអាចនឹងត្រួតពីលើគ្នា។ តើអ្នកណាជាន់អ្នកណា? CSS ប្រើ z-index ដើម្បីសម្រេច។ អ្នកណាដែលមានលេខ z-index ធំជាង នឹងស្ថិតនៅខាងលើគេ! (ឧទាហរណ៍ z-index: 999;)