កំណត់ទីតាំងធាតុត្រួតស៊ីគ្នាជាមួយសន្លឹករចនាប័ទ្មល្បាក់
បញ្ហាប្រឈមមួយក្នុងការប្រើទីតាំង CSS សម្រាប់ប្លង់ទំព័របណ្ដាញគឺថាធាតុមួយចំនួនរបស់អ្នកអាចត្រួតលើគ្នា។ វាដំណើរការល្អប្រសិនបើអ្នកចង់ឱ្យធាតុចុងក្រោយនៅក្នុង HTML ត្រូវនៅលើកំពូលប៉ុន្តែតើមានអ្វីប្រសិនបើអ្នកមិនមានឬអ្វីប្រសិនបើអ្នកចង់មានធាតុដែលបច្ចុប្បន្នមិនត្រួតលើគ្នាដើម្បីធ្វើដូច្នេះដោយព្រោះការរចនានេះហៅថា "ស្រទាប់" មើល។ ? ក្នុងគោលបំណងដើម្បីផ្លាស់ប្តូរវិធីដែលធាតុត្រួតលើគ្នាអ្នកត្រូវការប្រើលក្ខណៈសម្បត្តិរបស់ CSS ។
ប្រសិនបើអ្នកបានប្រើឧបករណ៍ក្រាហ្វិកនៅក្នុង Word និង PowerPoint ឬកម្មវិធីនិពន្ធរូបភាពដ៏មុតមាំដូចជា Adobe Photoshop នោះអ្នកប្រហែលជាបានឃើញអ្វីមួយដូចជាសន្ទស្សន៍ z ។ ក្នុងកម្មវិធីទាំងនេះអ្នកអាចបន្លិចវត្ថុដែលអ្នកបានគូរហើយជ្រើសរើសជម្រើសមួយដើម្បីផ្ញើ "ត្រឡប់ទៅក្រោយ" ឬ "នាំទៅមុខ" ធាតុមួយចំនួននៃឯកសាររបស់អ្នក។ នៅក្នុង Photoshop អ្នកមិនមានមុខងារទាំងនេះទេប៉ុន្តែអ្នកមានស្លាប "ស្រទាប់" នៃកម្មវិធីហើយអ្នកអាចរៀបចំកន្លែងដែលធាតុធ្លាក់នៅក្នុងផ្ទាំងក្រណាត់ដោយរៀបចំស្រទាប់ទាំងនេះឡើងវិញ។ ក្នុងឧទាហរណ៍ទាំងពីរនេះអ្នកត្រូវកំណត់សន្ទស្សន៍ z នៃវត្ថុទាំងនោះឱ្យសំខាន់។
តើអ្វីទៅជាសន្ទស្សន៍ Z?
នៅពេលអ្នកប្រើទីតាំង CSS ដើម្បីដាក់ធាតុនៅលើទំព័រអ្នកត្រូវគិតក្នុងវិមាត្របី។ មានទំហំស្ដង់ដារពីរ: ឆ្វេង / ស្តាំនិងកំពូល / បាត។ សន្ទស្សន៍ឆ្វេងទៅស្តាំត្រូវបានគេស្គាល់ថាជាលិបិក្រម x ខណៈដែលកំពូលទៅបាតមួយគឺជាសន្ទស្សន៍ y ។ នេះជារបៀបដែលអ្នកដាក់ទីតាំងធាតុផ្ដេកឬបញ្ឈរដោយប្រើលិបិក្រមទាំងពីរនេះ។
នៅពេលដែលមកដល់រចនាគេហទំព័រ, ក៏មានលំដាប់ជង់នៃទំព័រនេះ។ ធាតុនីមួយៗនៅលើទំព័រអាចត្រូវបានដាក់នៅខាងលើឬខាងក្រោមធាតុផ្សេងទៀត។ លក្ខណសម្បត្តិ z-index កំណត់កន្លែងដែលស្ថិតក្នុងជង់នីមួយៗ។ ប្រសិនបើសន្ទស្សន៍ X និងសន្ទស្សន៍ -Y គឺជាបន្ទាត់ផ្ដេកនិងបញ្ឈរនោះសន្ទស្សន៍ Z គឺជាជម្រៅនៃទំព័រវិមាត្រទី 3 ។
ខ្ញុំចូលចិត្តគិតអំពីធាតុនានានៅលើគេហទំព័រជាបំណែកក្រដាសហើយ ទំព័របណ្ដាញ ខ្លួនឯងជាផ្ទាំងរូបភាព។ កន្លែងដែលខ្ញុំដាក់ក្រដាសត្រូវបានកំណត់ដោយទីតាំងនិងរបៀបដែលវាត្រូវបានគ្របដណ្ដប់ដោយធាតុផ្សេងទៀតគឺសន្ទស្សន៍ z ។
សន្ទស្សន៍ Z គឺជាចំនួនលេខវិជ្ជមាន (ឧទាហរណ៍ 100) ឬអវិជ្ជមាន (ឧ។ -100) ។ សន្ទស្សន៍ z-z គឺលំនាំដើម 0. ធាតុដែលមានលិបិក្រម Z ខ្ពស់បំផុតគឺនៅខាងលើបន្ទាប់មកតាមលំដាប់ខ្ពស់បំផុតនិងបន្តបន្ទាប់ទៀតចុះក្រោមទៅលិបិក្រម Z ទាបបំផុត។ ប្រសិនបើធាតុពីរមានតម្លៃលិបិក្រម Z ដូចគ្នា (ឬវាមិនត្រូវបានកំណត់មានន័យថាប្រើតម្លៃលំនាំដើម 0) កម្មវិធីរុករកនឹងស្រទាប់ពួកវាតាមលំដាប់ដែលពួកវាលេចឡើងក្នុង HTML ។
របៀបប្រើសន្ទស្សន៍ z
ឱ្យធាតុនីមួយៗដែលអ្នកចង់បាននៅក្នុងជង់របស់អ្នកនូវតម្លៃលិបិក្រមហ្សែនខុសគ្នា។ ឧទាហរណ៍ប្រសិនបើខ្ញុំមានធាតុ 5 ផ្សេងគ្នា:
- ធាតុ 1 - z-index នៃ -25
- ធាតុ 2 - សន្ទស្សន៍ -82 នៃ 82
- ធាតុ 3 - z-index មិនត្រូវបានកំណត់
- ធាតុ 4 - z-index នៃ 10
- ធាតុ 5 - z-index of -3
ពួកគេនឹងជង់តាមលំដាប់ដូចខាងក្រោម:
- ធាតុ 2
- ធាតុ 4
- ធាតុ 3
- ធាតុ 5
- ធាតុ 1
ខ្ញុំសូមផ្តល់អនុសាសន៍ឱ្យប្រើតម្លៃលិបិក្រម z-z ខុសគ្នាយ៉ាងខ្លាំងដើម្បីរារាំងធាតុរបស់អ្នក។ តាមវិធីនេះប្រសិនបើអ្នកបន្ថែមធាតុជាច្រើនទៅទំព័រក្រោយមកអ្នកមានបន្ទប់ដើម្បីដាក់ស្រទាប់ពួកគេដោយមិនចាំបាច់លៃតម្រូវតម្លៃសន្ទស្សន៍ z នៃធាតុផ្សេងទៀតទាំងអស់។ ឧទាហរណ៍:
- 100 សម្រាប់ធាតុសំខាន់បំផុតរបស់ខ្ញុំ
- 0 សម្រាប់ធាតុកណ្តាលរបស់ខ្ញុំ
- -100 សម្រាប់ធាតុបាតរបស់ខ្ញុំ
អ្នកក៏អាចផ្តល់ធាតុពីរដូចគ្នានឹងលេខសន្ទស្សន៍ដូចគ្នាដែរ។ ប្រសិនបើធាតុទាំងនេះត្រូវបានដាក់ជង់ពួកវានឹងបង្ហាញតាមលំដាប់ដែលពួកវាត្រូវបានសរសេរជា HTML ដោយមានធាតុចុងក្រោយនៅផ្នែកខាងលើ។
ចំណាំមួយសម្រាប់ធាតុដើម្បីប្រើលក្ខណសម្បត្តិសន្ទស្សន៍ z ដែលមានប្រសិទ្ធិភាពវាត្រូវតែជាធាតុកម្រិតប្លុកឬប្រើការបង្ហាញ "ប្លុក" ឬ "ប្លុកក្នុងតួ" នៅក្នុងឯកសារ CSS របស់អ្នក។
អត្ថបទដើមរបស់នាង Jennifer Krynin ។ បានកែប្រែនៅថ្ងៃទី 12 ខែកញ្ញាឆ្នាំ 2019 ដោយលោក Jeremy Girard ។