កាលពីអត្ថបទមុន Techfreeបានលើកបង្ហាញអំពី មូលដ្ឋានគ្រឹះរបស់ Cascading Style Sheets (CSS)។ ចំណែកឯនៅក្នុងអត្ថបទនេះយើងនឹងលើកមកបង្ហាញអំពី របៀបកំណត់ទីតាំងជាមួយ CSS។
លក្ខណៈសម្បត្តិទីតាំង (position) បញ្ជាក់ពីប្រភេទនៃវិធីសាស្រ្តកំណត់ទីតាំងដែលបានប្រើសម្រាប់ធាតុ(element) (static, relative, fixed ឬ absolute) ។ មានលក្ខណៈសម្បត្តិទីតាំង (position) ៤ប្រភេទខុសៗគ្នា៖
- static
- relative
- fixed
- absolute
ធាតុទាំងអស់ត្រូវបានកំណត់ទីតាំង (position)ដោយប្រើប្រាស់លក្ខណៈសម្បត្តិ កំពូល (top), ក្រោម (bottom), ឆ្វេង (left), និងស្ដាំ (right)។ ទោះជាយ៉ាងណា លក្ខណៈសម្បត្តិទាំងនេះនឹងមិនដំណើរការទេលុះត្រាតែលក្ខណៈសម្បត្តិទីតាំង (position)នេះត្រូវបានកំណត់ជាលើកដំបូង។ ពួកគេបានធ្វើការខុសគ្នាអាស្រ័យលើតម្លៃទីតាំងនេះ។
(ទីតាំង) position:static;
ធាតុរបស់ HTML ត្រូវបានដាក់ទីតាំង static ដោយលំនាំដើម។ ធាតុដែលដាក់ទីតាំងនៅ static មិនត្រូវបានប៉ះពាល់ដោយលក្ខណៈសម្បត្តិ កំពូល (top), ក្រោម (bottom), ឆ្វេង (left), និងស្ដាំ (right)នោះទេ។
ធាតុមួយជាមួយ position: static; គឺមិនត្រូវបានដាក់ទីតាំងដោយវិធីណាមួយឡើយ វាជារឿយៗត្រូវបានដាក់ទីតាំងដោយពឹងផ្អែកលើលំហូរធម្មតានៃទំព័រ។
ខាងក្រោមនេះជា CSS ដែលត្រូវបានប្រើគឺ៖
ហើយសរសេរកូដដូចខាងក្រោម៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
(ទីតាំង) position:relative;
ធាតុមួយជាមួយ position: relative; គឺត្រូវបានដាក់ទីតាំងទាក់ទងទៅនឹងទីតាំងធម្មតារបស់វា។
ការកំណត់លក្ខណៈសម្បត្តិ កំពូល(top), ស្ដាំ(right), ខាងក្រោម(bottom), និងឆ្វេង(left)នៃធាតុមួយដែលទាក់ទង នឹងបង្កឱ្យមានការលៃតម្រូវឲឆ្ងាយពីទីតាំងធម្មតារបស់ខ្លួន។ មាតិកាផ្សេងទៀតនឹងមិនត្រូវបានលៃតម្រូវឱ្យសម នឹងចូលទៅក្នុងគម្លាតណាមួយដែលចាកចេញដោយធាតុ។
ខាងក្រោមនេះជា CSS ដែលត្រូវបានប្រើគឺ៖
ហើយសរសេរកូដដូចខាងក្រោម៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
(ទីតាំង) position:fixed;
ធាតុមួយជាមួយ position: fixed;ត្រូវបានកំណត់ទីតាំងទាក់ទងទៅផ្ទៃដែលមានន័យថាវាតែងតែស្ថិតនៅកន្លែងដដែលបើទោះបីជាទំព័រដែលត្រូវបានទាញចុះឡើង។ លក្ខណៈសម្បត្តិ កំពូល(top), ស្តាំ(right), ខាងក្រោម(bottom), និង ឆ្វេង(left) ត្រូវបានប្រើដើម្បីដាក់ទីតាំងធាតុ។
ធាតុថេរមិនចាកចេញពីគម្លាតមួយនៅក្នុងទំព័រជាកន្លែងដែលវាជាធម្មតាត្រូវបានកំណត់ទីតាំងនោះទេ។ ចូរកត់សំគាល់ធាតុថេរនៅជ្រុងក្រោមខាងស្ដាំនៃទំព័រ(សញ្ញាព្រួញ)។ ខាងក្រោមនេះជា CSS ដែលត្រូវបានប្រើគឺ៖
ហើយសរសេរកូដដូចខាងក្រោម៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
(ទីតាំង) position:absolute;
ធាតុមួយជាមួយ position: absolute;ត្រូវបានកំណត់ទីតាំងទាក់ទងទៅទីតាំងវិជ្ជមានដែលនៅជិតបំផុត (ជំនួសឱ្យការកំណត់ទីតាំងទាក់ទងជាវិជ្ជមានទៅនឹងviewport, ដូច fixed) ។
ទោះជាយ៉ាងណា; បើធាតុទីតាំងដាច់ខាត(absolute positioned)មិនមានទីតាំងវិជ្ជមានដែលនៅជិត នោះវានឹងប្រើរាងកាយនៃឯកសារហើយផ្លាស់ទីរួមជាមួយការឡើងចុះនៃទំព័រ។
ខាងក្រោមនេះជា CSS ដែលត្រូវបានប្រើគឺ៖
ហើយសរសេរកូដដូចខាងក្រោម៖
នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖
