z-индекс

CSS z-индекс шинж чанарЭлементүүдийг байрлуулахдаа хоорондоо давхцах дарааллыг тодорхойлдог. Өөрөөр хэлбэл, та үүнийг ашиглан аль элемент (давхарга) дээр, аль нь (ямар дарааллаар) доор байрлахыг зааж өгч болно.

Гэхдээ энэ нь тийм ч энгийн зүйл биш юм. Энэ шинж чанар нь CSS-ийн хоёр өөр функцийг нэгэн зэрэг гүйцэтгэдэг (байршил гэх мэт) цөөхөн зүйлийн нэг юм.

1. z-индекс шинж чанарыг байрлалтай элементүүдийг зохион байгуулахад ашигладаг.
2. Автоматтай тэнцүү биш z индекс бүхий элемент бүрийг үүсгэдэг шинэ түвшиндараалал нь бүх үр удамд (захиалгат) тохиолддог (удаа нь z-индекс нь автоматтай тэнцүү биш үр удам нь аль хэдийн өөрсдийн эрэмбийн түвшинг бий болгодог). Ийм учраас жишээлбэл, нэг захиалгын түвшний элементийг нөгөөгийн хоёр элементийн хооронд "байруулах" боломжгүй юм.
3. Үндэс элемент z-индекс заагаагүй байсан ч гэсэн үндсэн эрэмбийн түвшинг бий болгодог.

Энэ жишээг харцгаая:

Энэ жишээнд z-индекс тоон утгын хувьд та зөвхөн DIV3 болон DIV4-ийг солих боломжтой. Гэхдээ дараахь зүйл ажиллахгүй болно.

1. DIV3 болон DIV4-ийг DIV2-д оруулах боломжгүй, учир нь тэдгээр нь асаалттай байна өөр өөр түвшинзахиалга өгөх. DIV2 нь DIV1 элементийн үүсгэсэн түвшинд, DIV3 болон DIV4 нь DIV2-ийн үүсгэсэн түвшинд байна. Тэдгээрийг ижил түвшинд байлгахын тулд та DIV2-ээс z-индексийг хасах эсвэл автоматаар тохируулах хэрэгтэй.
2. DIV2-г DIV1-д оруулах нь ажиллахгүй. Үүнийг ажиллуулахын тулд та DIV1 дээр автоматаар тохируулах хэрэгтэй.
3. Гэх мэт...

Өөр өөр сурах бичиг, лавлах номонд "Захиалгын түвшин" гэсэн ойлголтыг өөр өөрөөр нэрлэдэг - орон нутгийн байрлал, орон нутгийн стекийн контекст гэх мэт. Албан ёсны CSS тодорхойлолтод үүнийг "орон нутгийн stacking context" гэж бичсэн байдаг. Гэхдээ миний бодлоор "захиалгын түвшин" гэсэн хэллэг нь ихэнх орос хэлээр ярьдаг хүмүүст ойлгомжтой байдаг тул би энэ тодорхойлолтыг танилцуулсан.

Үл хөдлөх хөрөнгийн төрөл

Зорилго: байрлал тогтоох.

Үүнд: статикаас өөр байрлалтай элементүүдэд хамаарна.

Өв залгамжлал: үгүй.

Үнэ цэнэ

z-индекс шинж чанарын утга нь дараах аргуудын аль нэгээр элементүүдийн дарааллыг зааж өгөх явдал юм.

• Тоо- өгөгдсөн эрэмбийн түвшний элементүүдийн дарааллыг тодорхойлдог аливаа эерэг эсвэл сөрөг бүхэл тоо. Илүү өндөр утгатай элементийг бага утгатай элемент дээр байрлуулна. Хэрэв хоёр элемент ижил утгатай бол HTML кодын доор байгаа нь дээр байх болно. Нэмж дурдахад, тоон утгатай (0-г оруулаад) элемент нь байрласан хүүхдүүдийнхээ шинэ эрэмбийн түвшинг бий болгодог.
• авто- энэ утгаараа одоогийн эрэмбийн түвшний элемент нь энэ түвшинг үүсгэсэн өвөг дээдэстэйгээ ижил z-индекстэй байна. Гэсэн хэдий ч элемент өөрөө үр удамд шинэ эрэмбийн түвшинг бий болгодоггүй. Хэрэв өгөгдсөн утгатай хэд хэдэн элемент байгаа бол хуудасны HTML кодын доор гарч ирэх элемент нь дээд талд байх болно.
• өвлөн авах- эх элементээс z-индекс утгыг өвлөн авна.

Оруулсан хувь:байхгүй.

Өгөгдмөл утга:авто.

Захиалгын түвшинг бий болгодог элемент дотор зөвхөн байрлалтай элементүүд төдийгүй бусад зарим элементүүд байж болох тул хөтчүүд өгөгдсөн түвшинд тэдгээрийг давхаргад байрлуулахдаа тодорхой дүрмийг ашигладаг.

1. Эхний давхарга нь энэ түвшний дарааллыг бий болгосон элементийн дэвсгэр болон хүрээг агуулдаг.
2. Дээд талд, хоёр дахь давхаргад z-индекс сөрөг утгатай удамшлын элементүүд байрладаг бөгөөд тэгтэй ойролцоо утгатай элемент дээр байрладаг.
3. Дараагийн давхарга нь суулгаагүй (дотор) удамшлын элементүүд юм.
4. Дөрөв дэх давхарга нь хөвөгч элементүүдээс (хөвөгч) тэдгээрийн агуулгын хамт бүрдэнэ.
5. Тав дахь давхарга нь удамшлын элементүүд юм.
6. Зургаа дахь давхарга нь z-index auto буюу 0-тэй элементүүдийг агуулж байгаа бөгөөд кодын доорх элемент нь илүү өндөр байна.
7. Эцэст нь, эерэг z-индекс утгатай элементүүд нь хамгийн дээд хэсэгт, өндөр утгатай элемент нь илүү өндөр байна.

Синтакс

z-индекс: автомат | тоо | өвлөн авах

CSS Жишээ: z-индексийг ашиглах

Үр дүн.

CSS хувилбарууд

Хөтөчүүд

Internet Explorer 6.0 ба 7.0 нь удамших утгыг ойлгохгүй байна. Мөн эдгээр хөтчүүдэд шинэ эрэмбийн түвшинг зөвхөн тоон z-индекстэй бус бүх байрлалтай элементүүдээр үүсгэнэ.

IE 6.0 нь элементийг үргэлж байрлуулдаг z-индексийн утгаас үл хамааран хуудасны бүх элементийн дээд талд.

Firefox 2.0 нь сөрөг z-индекстэй элементүүдийг тухайн зохицуулалтын түвшинг үүсгэсэн элементийн дэвсгэр болон хилийн доор байрлуулдаг. Өөрөөр хэлбэл, энэ нь давхрагын дүрмийн 1 ба 2-р цэгүүдийг эргүүлнэ.

Өнөөдрийн хичээл нь өчигдрийнхтэй адил CSS-д байрлал тогтоох, мөн z-index хэмээх маш сонирхолтой шинж чанарыг танд хэлэх болно.

Энэ өмчийг ашигласнаар та текстийн блокуудыг (зөвхөн текст биш) дээр нь байрлуулж, 3D эффект гэх мэт зүйлийг авах боломжтой.

Энэ хичээл нь вэб дизайнаар эхлэгчдэд маш их хэрэгтэй байх болно, учир нь онолын мэдээллээс гадна практик жишээг авч үзэх болно.

Тодорхой болгохын тулд доорх хоёр зургийг харна уу.

"Харьцангуй байрлал"

"Үнэмлэхүй байрлал"

Таны харж байгаагаар харьцангуй байрлалтай бол текст бүхий блокыг тексттэй догол мөртэй холбож байрлуулна. Үнэмлэхүй үед - хөтчийн цонхтой холбоотой.

Энэ өмчийн үйл ажиллагааг зургаар тайлбарлахад хамгийн хялбар байдаг:

Илүү өндөр утгатай элементийг дээр байрлуулна.

Одоо бидний демо хувилбарыг нарийвчлан авч үзье.

1-р блокийг бий болгох

1-р давхарга

#давхарга1 (
дэвсгэр:#707070;
өнгө: #fff;
албан тушаал: хамаатан садан;
өргөн: 800px;
өндөр: 450px;
}

Загваруудыг ашиглан бид энэ блокийн харьцангуй байрлалыг өгдөг. Үүний ачаар бид нэмэлт блокуудыг дотор нь байрлуулж болно.

2-р блок үүсгэх

1-р блоктой ижил төстэй байдлаар бид блок үүсгэдэг. Энэ блок нь зөвхөн танигчаараа ялгаатай (id="layer2").

Давхарга 2

Lorem Ipsum бол хэвлэх, хэвлэх үйл явцын зүгээр л хуурамч текст юм
аж үйлдвэр. Lorem Ipsum нь салбарын стандарт дамми текст байсан
1500-аад оноос хойш үл мэдэгдэх хэвлэгч галлерейг авснаас хойш
мөн түүгээр түүвэрлэн түүвэр ном хийхээр болов. Энэ нь амьд үлдсэнгүй
зөвхөн таван зуун, гэхдээ бас цахим хэвлэх үсрэлт,
үндсэндээ өөрчлөгдөөгүй хэвээр байна. Энэ нь 1960-аад онд алдартай болсон
Lorem Ipsum-ийн хэсгүүдийг агуулсан Letraset хуудаснуудыг гаргаснаар,
болон саяхан Aldus гэх мэт ширээний хэвлэлийн программ хангамжтай
Lorem Ipsum-ийн хувилбаруудыг багтаасан PageMaker.

#давхарга2 (
дэвсгэр:#f9ad81;
өнгө: #fff;
байрлал: үнэмлэхүй;
дээд: 40px;
зүүн: 50px;
өргөн: 400px;
өндөр: 400px;
z-индекс:1;
}

Бид хоёр дахь блокийн үнэмлэхүй байрлалыг өгдөг. Одоо тэр эхнийх нь дотор байх нь гарцаагүй бөгөөд хаашаа ч явахгүй. Үүнээс гадна бид z-index шинж чанарыг (=1) тодорхойлдог. Энэ нь 2-р блок эхнийхээс дээгүүр байрлана гэсэн үг юм.

3-р блокийг бий болгох

3-р давхарга

Lorem Ipsum бол хэвлэх, хэвлэх үйл явцын зүгээр л хуурамч текст юм
аж үйлдвэр. Lorem Ipsum нь салбарын стандарт дамми текст байсан
1500-аад оноос хойш үл мэдэгдэх хэвлэгч галлерейг авснаас хойш
мөн түүгээр түүвэрлэн түүвэр ном хийхээр болов. Энэ нь амьд үлдсэнгүй
зөвхөн таван зуун, гэхдээ бас цахим хэвлэх үсрэлт,
үндсэндээ өөрчлөгдөөгүй хэвээр байна. Энэ нь 1960-аад онд алдартай болсон
Lorem Ipsum-ийн хэсгүүдийг агуулсан Letraset хуудаснуудыг гаргаснаар,
болон саяхан Aldus гэх мэт ширээний хэвлэлийн программ хангамжтай
Lorem Ipsum-ийн хувилбаруудыг багтаасан PageMaker.

#давхарга3 (
дэвсгэр:#6dcff6;
өнгө: #fff;
байрлал: үнэмлэхүй;
дээд: 80px;
зүүн: 100px;
өргөн: 600px;
өндөр: 200px;
z-индекс:2;
}

Энэ блок дахь z-индекс = 2.

Та блокийн индексүүдийг сольж үзээд үр дүнг нь харж болно.

Бага z-индекстэй элемент нь үргэлж өндөртэй элементийн доор байх болно гэдгийг санаарай. Өөрөөр хэлбэл, та 1-р блокыг индекс = 999, 2-р блок - 1000 гэж өгч болно. Үр дүн нь ижил байх болно.

Энэ бол өнөөдрийнх! Анхаарал тавьсанд баярлалаа!

Товч мэдээлэл

CSS хувилбарууд

CSS 1	CSS 2	CSS 2.1	CSS 3

Тодорхойлолт

Вэб хуудасны аль ч элементийг тодорхой дарааллаар давхарлан байрлуулж, дэлгэцийн перпендикуляр гурав дахь хэмжээсийг дуурайлган хийдэг. Элемент бүр нь вэб хуудасны бусад объектын доор эсвэл дээр байж болох бөгөөд z тэнхлэгийн дагуу байршуулалтыг z индексээр удирддаг. Энэ шинж чанар нь зөвхөн байрлалын утга нь үнэмлэхүй , тогтмол эсвэл харьцангуй элементүүдэд ажилладаг.

Синтакс

z-индекс: тоо | авто | өвлөн авах

Үнэ цэнэ

Бүхэл тоонуудыг (эерэг, сөрөг, тэг) утга болгон ашигладаг. Утга өндөр байх тусам элемент нь бага утгатай элементүүдтэй харьцуулахад өндөр байна. Хэрэв z индексийн утга тэнцүү бол урд талын элемент нь HTML кодын доор тайлбарласан элемент болно. Хэдийгээр техникийн үзүүлэлтүүд нь сөрөг z-индекс утгыг ашиглахыг зөвшөөрдөг ч ийм элементүүдийг харуулахгүй Firefox хөтөч 2.0 хувилбар хүртэл.

Үүнээс бусад нь тоон утгууд auto-г ашигладаг - энэ тохиолдолд элементийн дарааллыг HTML код дахь байрлал, эцэг эхийн харьяаллаас хамааран автоматаар бүтээдэг, учир нь хүүхэд элементүүд нь эх элементтэйгээ ижил тоотой байдаг. Өв залгамжлах утга нь эцэг эхээс удамшсан болохыг илтгэнэ.

HTML5 CSS2.1 IE Cr Op Sa Fx

Дээд талд 1-р давхарга

1-р давхарга

Давхарга 2

Дээрээс нь 4-р давхарга

3-р давхарга

4-р давхарга

Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 1.

Цагаан будаа. 1. z-индекс шинж чанарыг ашиглах

Объект загвар

document.getElementById("elementID ").style.zIndex

Хөтөчүүд

Жагсаалтыг шошго ашиглан үүсгэсэн

, В Интернет хөтөч Explorer 6 нь z-индексийн утгаас үл хамааран бусад элементүүдийн дээр үргэлж харагдана.

Internet Explorer-ийн 7.0 хүртэлх хувилбарууд нь удамших утгыг дэмждэггүй бөгөөд автоматыг 0 гэж тайлбарладаг.

Firefox хөтчийн 2.0 хүртэлх хувилбаруудад сөрөг z-индекс утга нь тухайн элементийг вэб хуудасны арын дэвсгэр болон түүний агуулгын доор байрлуулдаг.

Z-индекстэй холбоотой асуудал бол олон хүмүүс энэ нь хэрхэн ажилладагийг ойлгодоггүй явдал юм.
Доор тайлбарласан бүх зүйл W3C техникийн үзүүлэлтэд байна. Харамсалтай нь хүн бүр уншдаггүй.

Асуудлын тайлбар:

Үндсэн CSS дизайнтай HTML кодыг доор харуулав.

Даалгавар:Дараах дүрмийг зөрчихгүйгээр хөх, ногоон өнгөний ард улаан байгаа эсэхийг шалгаарай.

• Та HTML тэмдэглэгээг өөрчлөх боломжгүй
• Та элементүүдэд z-индексийг өөрчлөх/нэмэх боломжгүй
• Та элементүүдийн байршлыг өөрчлөх/нэмэх боломжгүй

Шийдэл:

Хмм, энд ямар нэг зүйл буруу байна. Ил тод байдал үүнтэй ямар холбоотой вэ? Энэ нь давхардсан элементүүдийн дараалалд хэрхэн нөлөөлж чадах вэ? Та ч мөн адил бодож байна уу? Клубт тавтай морил!
Өгүүллийн хоёрдугаар хэсэгт бүх зүйл байрандаа орно гэж найдаж байна.

Элементүүдийг давхарлах дараалал:

Ямар ч элемент HTML баримт бичигурд болон ард байж болно. Үүнийг хүн бүр мэддэг. Энэ дарааллыг тодорхойлсон дүрмүүд нь техникийн тодорхойлолтод тодорхой тусгагдсан байдаг, гэхдээ дээр дурдсанчлан хүн бүр тэдгээрийг бүрэн ойлгодоггүй.

Хэрэв z-индекс болон байршлын шинж чанаруудыг тодорхой заагаагүй бол бүх зүйл энгийн: овоолох дараалал нь HTML дэх элементүүдийн дараалалтай тэнцүү байна. (Энэ нь үнэндээ үүнээс арай илүү төвөгтэй боловч доторлогооны элементүүдийг давхцуулахын тулд сөрөг дүүргэлтийн утгыг ашиглахгүй л бол захын тохиолдол гарахгүй)

Хэрэв та элементүүдийн (болон тэдгээрийн хүүхдүүдийн) байршлыг тодорхой зааж өгсөн бол ийм элементүүд нь тодорхой байршил тогтоох шинж чанаргүй элементүүдтэй давхцах болно. (Би "байршлыг тодорхой зааж өг" гэж хэлэхэд би статикаас өөр ямар ч утгыг хэлж байна, жишээлбэл: үнэмлэхүй эсвэл харьцангуй).

Эцэст нь z-индексийг өгсөн тохиолдол. Эхлэхийн тулд том z-индекстэй элементүүд нь жижиг z-индекстэй элементүүдийн дээр байх бөгөөд z-индекс олонлогтой аливаа элемент нь z-индексгүй элементийн дээр байх болно гэж үзэх нь зүйн хэрэг боловч энэ нь тийм биш. Нэгдүгээрт, z-индексийг зөвхөн тодорхой байрлуулсан элементүүдэд тооцдог. Хэрэв та байрлалгүй элемент дээр z-индексийг тохируулахыг оролдвол юу ч болохгүй. Хоёрдугаарт, z индексийн утгууд нь давхардсан контекстийг үүсгэж болно. Хмм, бүх зүйл илүү төвөгтэй болсон, тийм үү?

Давхардсан контекст

Давхардсан контекст бүр HTML бүтцэд өөрийн үндсэн элементтэй байдаг. Элемент дээр шинэ контекст үүсэх үед бүх хүүхэд элементүүд мөн энэ контекст багтаж, давхаргын дарааллаар байр сууриа эзэлдэг. Хэрэв элемент нь нэг давхаргын контекстийн хамгийн доод хэсэгт байрласан бол z-индексийг сая болгож тохируулсан ч гэсэн шатлалын дээд талд байгаа зэргэлдээх давхаргын контекст өөр элементийн дээр харуулах ямар ч боломжгүй.

Дараах тохиолдолд шинэ контекст үүсч болно.

• Хэрэв элемент нь баримт бичгийн үндсэн элемент бол (элемент)
  Хэрэв элемент статик байрлалгүй, z индексийн утга нь автомат биш бол
  Хэрэв элемент 1-ээс бага тунгалаг бол

Z-индекстэй холбоотой асуудал бол олон хүмүүс энэ нь хэрхэн ажилладагийг ойлгодоггүй явдал юм.
Доор тайлбарласан бүх зүйл W3C техникийн үзүүлэлтэд байна. Харамсалтай нь хүн бүр уншдаггүй.

Асуудлын тайлбар:

Үндсэн CSS дизайнтай HTML кодыг доор харуулав.

Даалгавар:Дараах дүрмийг зөрчихгүйгээр хөх, ногоон өнгөний ард улаан байгаа эсэхийг шалгаарай.

• Та HTML тэмдэглэгээг өөрчлөх боломжгүй
• Та элементүүдэд z-индексийг өөрчлөх/нэмэх боломжгүй
• Та элементүүдийн байршлыг өөрчлөх/нэмэх боломжгүй

Шийдэл:

Хмм, энд ямар нэг зүйл буруу байна. Ил тод байдал үүнтэй ямар холбоотой вэ? Энэ нь давхардсан элементүүдийн дараалалд хэрхэн нөлөөлж чадах вэ? Та ч мөн адил бодож байна уу? Клубт тавтай морил!
Өгүүллийн хоёрдугаар хэсэгт бүх зүйл байрандаа орно гэж найдаж байна.

Элементүүдийг давхарлах дараалал:

HTML баримт бичгийн аль ч элемент нь урд болон дэвсгэр байж болно. Үүнийг хүн бүр мэддэг. Энэ дарааллыг тодорхойлсон дүрмүүд нь техникийн тодорхойлолтод тодорхой тусгагдсан байдаг, гэхдээ дээр дурдсанчлан хүн бүр тэдгээрийг бүрэн ойлгодоггүй.

Хэрэв z-индекс болон байршлын шинж чанаруудыг тодорхой заагаагүй бол бүх зүйл энгийн: овоолох дараалал нь HTML дэх элементүүдийн дараалалтай тэнцүү байна. (Энэ нь үнэндээ үүнээс арай илүү төвөгтэй боловч доторлогооны элементүүдийг давхцуулахын тулд сөрөг дүүргэлтийн утгыг ашиглахгүй л бол захын тохиолдол гарахгүй)

Хэрэв та элементүүдийн (болон тэдгээрийн хүүхдүүдийн) байршлыг тодорхой зааж өгсөн бол ийм элементүүд нь тодорхой байршил тогтоох шинж чанаргүй элементүүдтэй давхцах болно. (Би "байршлыг тодорхой зааж өг" гэж хэлэхэд би статикаас өөр ямар ч утгыг хэлж байна, жишээлбэл: үнэмлэхүй эсвэл харьцангуй).

Эцэст нь z-индексийг өгсөн тохиолдол. Эхлэхийн тулд том z-индекстэй элементүүд нь жижиг z-индекстэй элементүүдийн дээр байх бөгөөд z-индекс олонлогтой аливаа элемент нь z-индексгүй элементийн дээр байх болно гэж үзэх нь зүйн хэрэг боловч энэ нь тийм биш. Нэгдүгээрт, z-индексийг зөвхөн тодорхой байрлуулсан элементүүдэд тооцдог. Хэрэв та байрлалгүй элемент дээр z-индексийг тохируулахыг оролдвол юу ч болохгүй. Хоёрдугаарт, z индексийн утгууд нь давхардсан контекстийг үүсгэж болно. Хмм, бүх зүйл илүү төвөгтэй болсон, тийм үү?

Давхардсан контекст

Давхардсан контекст бүр HTML бүтцэд өөрийн үндсэн элементтэй байдаг. Элемент дээр шинэ контекст үүсэх үед бүх хүүхэд элементүүд мөн энэ контекст багтаж, давхаргын дарааллаар байр сууриа эзэлдэг. Хэрэв элемент нь нэг давхаргын контекстийн хамгийн доод хэсэгт байрласан бол z-индексийг сая болгож тохируулсан ч гэсэн шатлалын дээд талд байгаа зэргэлдээх давхаргын контекст өөр элементийн дээр харуулах ямар ч боломжгүй.

Дараах тохиолдолд шинэ контекст үүсч болно.

• Хэрэв элемент нь баримт бичгийн үндсэн элемент бол (элемент)
  Хэрэв элемент статик байрлалгүй, z индексийн утга нь автомат биш бол
  Хэрэв элемент 1-ээс бага тунгалаг бол