ការដាក់ទីតាំង CSS គឺមានច្រើនជាងគ្រាន់តែ X និង Y កូអរដោនេ
ទីតាំងរបស់ CSS ជាផ្នែកមួយដ៏សំខាន់នៃការបង្កើតប្លង់វែបសាយ។ ទោះបីជាមានការកើនឡើងនៃបច្ចេកទេសប្លង់ CSS ថ្មីៗដូចជា Flexbox និង CSS Grid ក៏ដោយការដាក់ទីតាំងនៅតែមានសារៈសំខាន់សម្រាប់កាបូបអ្នករចនាអ្នករចនាគេហទំព័រ។
នៅពេលប្រើ CSS ការកំណត់ទីមួយដែលអ្នកត្រូវធ្វើគឺបង្កើតលក្ខណសម្បត្តិ CSS សម្រាប់ទីតាំងប្រាប់កម្មវិធីរុករកប្រសិនបើអ្នកនឹងប្រើទីតាំងដាច់ខាតឬទាក់ទងសម្រាប់ធាតុដែលបានផ្តល់ឱ្យ។ អ្នកក៏ត្រូវយល់ច្បាស់អំពីភាពខុសគ្នារវាងលក្ខណៈសម្បត្តិទីតាំងទាំងពីរនេះ។
ខណៈដែលដាច់ខាតហើយនិងទាក់ទងគឺជាគុណសម្បត្តិនៃទីតាំង CSS ពីរដែលត្រូវបានប្រើច្រើនបំផុតក្នុងការរចនាតាមបណ្តាញមានបួនបណ្តារដ្ឋជាកម្មសិទ្ធិទីតាំង:
- ឋិតិវន្ត
- ដាច់ខាត
- សាច់ញាតិ
- ថេរ
ឋិតិវន្តគឺជាទីតាំងលំនាំដើមសម្រាប់ធាតុណាមួយនៅលើគេហទំព័រ។ ប្រសិនបើអ្នកមិនកំណត់ទីតាំងរបស់ធាតុវានឹងឋិតិវន្ត។ នេះមានន័យថាវានឹងបង្ហាញនៅលើអេក្រង់ដោយផ្អែកលើកន្លែងដែលវាស្ថិតនៅក្នុង ឯកសារ HTML និងរបៀបដែលវានឹងបង្ហាញនៅក្នុង លំហូរធម្មតា នៃឯកសារនោះ។
ប្រសិនបើអ្នកអនុវត្តច្បាប់តម្រង់ដូចជាកំពូលឬឆ្វេងទៅធាតុដែលមានទីតាំងឋិតិវន្តច្បាប់ទាំងនោះនឹងត្រូវបានមិនអើពើហើយធាតុនឹងនៅតែជាកន្លែងដែលវាលេចឡើងក្នុងលំហូរឯកសារធម្មតា។ ជាការពិតអ្នកកម្រនឹងត្រូវកំណត់ធាតុទៅឋិតិវន្តក្នុង CSS ពីព្រោះវាជាតម្លៃលំនាំដើម។
ការកំណត់ទីតាំង CSS ដាច់ខាត
ទីតាំងដាច់ខាតគឺប្រហែលជាទីតាំង CSS ងាយស្រួលបំផុត។ អ្នកចាប់ផ្តើមជាមួយលក្ខណសម្បត្តិទីតាំង CSS នេះ:
ទីតាំង: ដាច់ខាតតម្លៃនេះប្រាប់កម្មវិធីរុករកថាអ្វីដែលនឹងត្រូវបានដាក់គួរតែត្រូវបានយកចេញពីលំហូរធម្មតានៃឯកសារហើយជំនួសវិញត្រូវបានដាក់នៅក្នុងទីតាំងពិតប្រាកដនៅលើទំព័រ។ នេះត្រូវបានគណនាដោយផ្អែកលើបុព្វបុរសដែលមិនឈរនៅជិតបំផុតរបស់ធាតុនោះ។
ពីព្រោះធាតុដែលត្រូវបានដកចេញពីលំហូរធម្មតានៃឯកសារវានឹងមិនប៉ះពាល់ដល់របៀបដែលធាតុមុនវាឬបន្ទាប់ពីវានៅក្នុង HTML ត្រូវបានដាក់នៅលើគេហទំព័រ។
ឧទាហរណ៍ប្រសិនបើអ្នកមានចំណែកដែលត្រូវបានដាក់ដោយប្រើតម្លៃនៃសាច់ញាតិ (យើងនឹងមើលតម្លៃនេះក្នុងពេលឆាប់ៗ) ហើយនៅផ្នែកនោះអ្នកមានកថាខណ្ឌដែលអ្នកចង់ដាក់ទីតាំងភីកសែល 50 ពីកំពូលនៃផ្នែកនោះអ្នក នឹងបន្ថែមតម្លៃទីតាំងនៃ "ដាច់ខាត" ទៅកថាខណ្ឌនោះជាមួយតម្លៃអុហ្វសិត 50px លើលក្ខណសម្បត្តិ "កំពូល" ដូចនេះ។
ទីតាំង: ដាច់ខាត កំពូល: 50 ភីក;ធាតុដែលមានទីតាំងពិតប្រាកដនេះនឹងបង្ហាញ 50 ភីចសែលពីផ្នែកខាងលើនៃផ្នែកដែលជាប់ទាក់ទង - មិនថាមានអ្វីផ្សេងទៀតដែលបង្ហាញនៅក្នុងលំហូរធម្មតាទេ។ ធាតុ "តាំងពិត" របស់អ្នកត្រូវបានប្រើជាបរិបទដែលទាក់ទងនិងបរិបទរបស់វាហើយតម្លៃដែលអ្នកប្រើគឺទាក់ទង។
លក្ខណសម្បត្តិទីតាំងទាំងបួនដែលអ្នកមានដើម្បីប្រើគឺ:
- កំពូល
- សិទ្ធិ
- បាត
- ឆ្វេង
អ្នកអាចប្រើទាំងខាងលើឬបាត (ចាប់តាំងពីធាតុមិនអាចដាក់ទីតាំងបានយោងទៅតាមតំលៃទាំងទាំងពីរនេះ) និងទាំងខាងស្តាំឬខាងឆ្វេង។
ប្រសិនបើធាតុមួយត្រូវបានកំណត់ទៅជាទីតាំងដាច់ខាតប៉ុន្តែនៅទីនោះវាមិនមានបុព្វបុរសដែលមិនមានឋិតិវន្តនោះទេវានឹងត្រូវបានកំណត់ទាក់ទងទៅនឹងធាតុរាងកាយដែលជាធាតុកម្រិតខ្ពស់បំផុតនៃទំព័រ។
ការដាក់ទីតាំងទាក់ទង
យើងបានរៀបរាប់ពីទីតាំងទាក់ទងរួចហើយដូច្នេះសូមពិនិត្យមើលលក្ខណៈសម្បត្តិនោះឥឡូវនេះ។
ទីតាំងទាក់ទងប្រើលក្ខណសម្បត្តិទីតាំងបួនដូចគ្នានឹងទីតាំងដាច់ខាតប៉ុន្តែជំនួសឱ្យការដាក់ទីតាំងរបស់ធាតុទៅលើបុព្វបុរសដែលមិនស្ថិតស្ថេរបំផុតរបស់វាវាចាប់ផ្តើមពីកន្លែងដែលធាតុនឹងត្រូវបានប្រសិនបើវានៅតែមាននៅក្នុងលំហូរធម្មតា។
ឧទាហរណ៍ប្រសិនបើអ្នកមានកថាខណ្ឌបីនៅលើទំព័របណ្តាញរបស់អ្នកហើយទីបីមានរចនាប័ទ្ម "ទីតាំង: ទាក់ទង" ដាក់លើវាទីតាំងរបស់វានឹងត្រូវបានទូទាត់ដោយផ្អែកលើទីតាំងបច្ចុប្បន្នរបស់វា។
កថាខ័ណ្ឌទី 2
កថាខ័ណ្ឌ 3 ។
នៅក្នុងឧទាហរណ៍ខាងលើកថាខណ្ឌទីបីនឹងត្រូវបានដាក់ 2 ពីផ្នែកខាងឆ្វេងនៃធាតុធុងប៉ុន្តែវានៅតែស្ថិតនៅក្រោមកថាខណ្ឌពីរដំបូង។ វានឹងនៅតែមាននៅក្នុងលំហូរធម្មតានៃឯកសារហើយគ្រាន់តែត្រូវបានទូទាត់បន្តិច។ ប្រសិនបើអ្នកប្តូរទីតាំងវាទៅ: absolute; អ្វីដែលនៅពីក្រោយវានឹងបង្ហាញនៅលើវាព្រោះវានឹងមិនមាននៅក្នុងលំហូរធម្មតានៃឯកសារនោះទេ។
ធាតុនៅលើទំព័របណ្តាញមួយដែលត្រូវបានប្រើជាញឹកញាប់ដើម្បីកំណត់តម្លៃនៃទីតាំង: ទាក់ទងជាមួយគ្មានតម្លៃអុហ្វសិតដែលបានបង្កើតឡើងដែលមានន័យថាធាតុនៅតែជាកន្លែងដែលវានឹងបង្ហាញនៅក្នុងលំហូរធម្មតា។ នេះត្រូវបានធ្វើឡើងតែមួយគត់ដើម្បីបង្កើតធាតុនោះជាបរិបទប្រឆាំងនឹងធាតុផ្សេងទៀតដែលអាចដាក់ទីតាំងបានពិតប្រាកដ។ ឧទាហរណ៍ប្រសិនបើអ្នកមានបែងចែកវេបសាយរបស់អ្នកទាំងមូលជាមួយនឹងតម្លៃថ្នាក់នៃ "កុងតឺន័រ" (ដែលជាសេណារីយ៉ូទូទៅបំផុតនៅក្នុងការរចនាតាមបណ្ដាញ) នោះផ្នែកនោះអាចត្រូវបានកំណត់ទៅទីតាំងនៃសាច់ញាតិដូច្នេះអ្វីៗនៅក្នុងវាអាចប្រើ វាជាបរិបទកំណត់ទីតាំងមួយ។
តើអ្វីទៅជាទីតាំងមានកាលកំណត់?
ការជួសជុលទីតាំងគឺមានច្រើនដូចជាទីតាំងដាច់ខាត។ ទីតាំងនៃធាតុត្រូវបានគណនាតាមវិធីដូចគ្នានឹងគំរូដាច់ខាតប៉ុន្តែធាតុថេរត្រូវបានជួសជុលនៅទីតាំងនោះ - ស្ទើរតែដូចជា ទឹកហូរព្រីន ។ អ្វីផ្សេងទៀតនៅលើទំព័របន្ទាប់មករមូរធាតុកន្លង។
ដើម្បីប្រើតម្លៃទ្រព្យសម្បត្តិនេះអ្នកនឹងកំណត់:
ទីតាំង: ថេររក្សាទុកក្នុងចិត្តថានៅពេលដែលអ្នកជួសជុលធាតុមួយនៅនឹងកន្លែងនៅលើវែបសាយត៍របស់អ្នកវានឹងបោះពុម្ពនៅទីតាំងនោះនៅពេលដែលទំព័របណ្តាញរបស់អ្នកត្រូវបានបោះពុម្ព។ ឧទាហរណ៍ប្រសិនបើធាតុរបស់អ្នកត្រូវបានជួសជុលនៅផ្នែកខាងលើនៃទំព័ររបស់អ្នកវានឹងលេចឡើងនៅផ្នែកខាងលើនៃទំព័រដែលបានបោះពុម្ពទាំងអស់ព្រោះវាត្រូវបានគេជួសជុលទៅខាងលើនៃទំព័រ។ អ្នកអាចប្រើប្រភេទមេឌៀដើម្បីផ្លាស់ប្តូររបៀប ដែលទំព័របោះពុម្ពបាន បង្ហាញធាតុថេរ:
@media screen {h1 # first {ទីតាំង: ថេរ; }} @media បោះពុម្ភ {h1 # ដំបូង {ទីតាំង: ឋិតិវន្ត; }}អត្ថបទដើមរបស់នាង Jennifer Krynin ។ កែសម្រួលដោយលោក Jeremy Girard នៅថ្ងៃទី 1/7/16 ។