របៀបកំណត់ទីតាំងជាមួយ CSS

• Phearom Prom


• 28 Sep 2016

កាលពីអត្ថបទមុន 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 ដែលត្រូវបានប្រើគឺ៖

ហើយសរសេរកូដដូចខាងក្រោម៖

នោះនឹងបង្ហាញលទ្ធផលដូចខាងក្រោម៖

Save