Cascading Style Sheets нь давхцах элементүүдийг байршуулна
Вэб хуудсын CSS байршлыг ашиглахад тулгардаг бэрхшээлүүдийн нэг нь таны зарим элементүүд бусдын давхцал байж болох юм. Хэрэв та HTML дэх хамгийн сүүлийн элементийг дээд хэсэгт нь оруулахыг хүсвэл энэ нь сайн ажилладаг, гэхдээ хэрэв та хийхгүй байгаа бол, хэрэв та одоогоор бусдаас давж чадахгүй байгаа элементүүдтэй байхыг хүсч байгаа бол яагаад гэвэл энэ дизайн нь "давхардсан" ? Замын элементийн давхцлыг өөрчлөхийн тулд CSS-ийн өмчийг ашиглах хэрэгтэй.
Хэрэв та Word and PowerPoint график хэрэгслийг ашиглан Adobe Photoshop шиг илүү хүчтэй засварлагч ашиглаж байсан бол z-индекстэй адилхан үйлдэл хийсэн байж магадгүй юм. Эдгээр програмуудад та өөрийн зурсан зургуудыг тодруулж, баримт бичгийнхээ зарим элементүүдийг "Илгээх рүү буцах", "Урд нь авчрах" сонголтыг сонгож болно. Photoshop-д эдгээр функцууд байдаггүй боловч хөтөлбөрийн "Layer" панел байгаа бөгөөд та эдгээр давхаргыг дахин зохион байгуулснаар зураг дээр элемент нээгдэх боломжтой болно. Эдгээр жишээнүүдийн аль алины хувьд та эдгээр объектын z-индексийг үндсэндээ тогтоох болно.
Z-индекс гэж юу вэ?
Хуудас дээрх элементүүдийг байршуулахын тулд CSS байрлуулалтыг ашиглаж байгаа бол гурван хэмжээсээр бодох хэрэгтэй. Хоёр стандарт хэмжээс байдаг: зүүн / баруун, дээд / доод. Зүүнээс баруун тийш индексийг x-индекс гэж нэрлэдэг бол дээшээ нэгийг нь y-индекс гэнэ. Энэ бол эдгээр хоёр индексийг ашиглан хэвтээ болон босоо элементүүдийг хэрхэн байрлуулах вэ?
Веб дизайныг харахад хуудасны стекийг захиалах болно. Хуудас дээрх элемент бүр нь бусад элементүүдээс дээгүүр эсвэл доогуур байж болно. Z-индекс өмч нь элемент бүр дээр байрлана. Хэрэв x-индекс ба y-индексүүд нь хэвтээ ба босоо шугамууд бол z-индекс нь хуудасны гүн, үндсэндээ 3-р хэмжээтэй байна.
Би хуудасны хэсгүүдийг элементүүдийн талаар бодох дуртай . Вэб хуудас нь өөрөө координат гэж боддог. Би цаасыг хаана байрлуулахыг байрлалаар тодорхойлдог бөгөөд бусад элементүүдийн хичнээн хэсгийг хамруулсан нь z-индекс юм.
Z-индекс нь эерэг (жишээлбэл, 100) эсвэл сөрөг (жишээ нь: -100) тоо юм. Анхдагч z-индекс нь 0 байна. Хамгийн өндөр z-индекстэй элемент нь дээд талд, дараагийн хамгийн их гэх мэт хамгийн бага z-индекс рүү чиглэсэн. Хэрвээ хоёр элемент нь z-индексийн утгатай ижил утгатай бол (эсвэл энэ нь тодорхойлогдоогүй, 0 утга нь анхдагч утгыг ашигладаг бол) хөтөч HTML дээр гарч ирэх дарааллаар нь давхарлана.
Z-индексийг хэрхэн ашиглах вэ
Таны стек дээр хүссэн элемент бүрийг z-индексийн утга өөрөөр өг. Жишээ нь, би таван янзын элементтэй бол:
- элемент 1 - z-индекс -25
- элемент 2 - z-индекс 82
- элемент 3 - z-индекс тохируулагдаагүй
- элемент 4 - z-index of 10
- элемент 5 - z-индекс -3
Тэд дараах дарааллаар байрлуулна:
- элемент 2
- элемент 4
- элемент 3
- элемент 5
- элемент 1
Би элементүүдээ стеклавал зайнаас ялгаатай z-индекс утгыг ашиглахыг зөвлөж байна. Ингэснээр, та сүүлд хуудасны илүү элементүүдийг нэмэх бол бусад бүх элементийн z-индекс утгыг тохируулахгүйгээр тохируулахгүй байх боломжтой. Жишээлбэл:
- Миний хамгийн шилдэг элемент 100
- 0 миний дунд элемент
- -100 миний доод элемент
Та мөн ижил z-индексийн утгатай хоёр элементийг өгч болно. Хэрэв эдгээр элементүүдийг овоолсон бол тэдгээр нь HTML дээр бичигдсэн дарааллаар нь харуулах болно.
Z-индексийг үр дүнтэй ашиглах элементийн нэг тэмдэглэл бол энэ нь блок түвшний элемент байх ёстой эсвэл таны CSS файлын "блок" эсвэл "шугаман-блок" харуулах хэрэгтэй.
Женнифер Кэрнин эх нийтлэл. 12/09/16-нд Жереми Герард засварлав.