CSS-Z-индекс: тойм, шинж чанар

Дүрэм CSS Z-индексийг - хуудас элемент албан тушаал Z зохицуулах: гаргах элемент буюу давхарга нь энэ нь байрлаж байгаа түвшинг. Z-индекс илүү байна Tag бүрэн харуулагдах болно. Tags тэд орж ирж байгаа урсгал, давхцал гарч дарааллаар гарч ирнэ. приоритет видимости. Z-индексийн утга нь алсын барааны харагдац ач холбогдол тодорхойлдог.

Бид орчин үеийн програмууд болон хөтчүүд алгоритм дэлгэцийн элементийн алба гувчуур төлөх ёстой. график болон фото зураг дэлгэц програм цонхны элементүүдийн Тайрагдсан асуудал үзэгдэх ба үл үзэгдэх хэсгийг бий хоногийн оноос хойш харагдах дэлгэцийн технологи агуулга нь маш сайн үр дүнд хүрч байна. хөтөч цонхонд, бүх элементүүд хэрэглэгч загвар, хөгжүүлэгч заасан нь зөвхөн юу харж, зөв гарч байна.

ерөнхий дүрэм: захиалга, түвшин

оролтын урсгал (хуудас байгуулагдсан сервер) дараалуулан хөтчийг уншдаг. Бүх хаягууд CSS журмын дагуу гарах учир давхцаж болно.

Энэ жишээ нь дөрвөн харагдах элементийг тайлбарлах болно. Дараалсан бүр нь өмнөх нэгийг нь давхцаж байна. хаягууд гаталж байгаа газарт, давамгайлах асуулт байна. Эдгээр нь бүгд ижил бөгөөд 848 тэнцэх нь дүрэм Z-индекс CSS хаягууд байгаагаар, энэ нь илэрхий гэсэн элемент нь дараах байдлаар явж байх болно. Бүх бололтой, дараагийн элемент тус бүрийн дор гарч пиэк.

дүрэм алсын барааны харагдац

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

Ихэнх тохиолдолд энэ нь чухал биш юм. Орчин үеийн тоног төхөөрөмж маш хурдан бөгөөд цэгт дараагийн элементийг хаах болно гэж элемент redraw анзаарч, маш их асуудалтай байдаг.

элемент массивын дээр нөлөөлөл

scCSS3 Z-индексийн өсөлтөд гурав дахь тагийн л хангалттай бөгөөд scCSS4 үед - багасгах, нийт зураг өөрчлөгдсөн байна. урсгалд элементүүдийн дараалал адил хэвээр байна:

• id= 'scCSS1'; DIV ID = 'scCSS1';
• id= 'scCSS2'; DIV ID = 'scCSS2';
• id= 'scCSS3'; DIV ID = 'scCSS3';
• id= 'scCSS4'. DIV ID = 'scCSS4 ".

Энэ нь хоёр дахь зураг нь үнэндээ энэ мэт илүү орон зайг эзэлдэг гэдгийг тэмдэглэх нь зүйтэй. Гурав дахь зураг адил байна. Цаашилбал, энэ нь бие биенээсээ зайтай хоёр хэсэгт (хоёр өндөг) бүрдэнэ.

бүс нутаг, хоёр дахь, гурав дахь зургийг эзэлж бодит хэмжээ тус, шар, саарал онцлон тэмдэглэсэн байна.

суурь, өнгө Z-индексийн хослол

Энэ нь CSS цаана & Z-индексийн шинж бие биенээ нөхөн гүйцээдэг гэдгийг тэмдэглэх нь зүйтэй. Бүх блок түвшний элементүүд, болон бусад аль ч үргэлж тэгш өнцөгт талбай дээд тал нь өндөр, агуулга хамгийн их өргөн үүссэн эзэлж байна.

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

Та зам сонгосон хэлбэр текстийг байрлуулж болно, гэхдээ та нарын хийвэл, агуулга аль нэг элемент нь тэгш өнцөгт хайрцагт, оролт хүлээн авсан өдрөөс хойш авдаг дараалуулан.

Ашиглах шинж чанар нь суурь өнгийн утга ил тод (ил тод байдал нь нэг төрлийн) нь ямар ч хэлхээний элемент дуурайж чадна элементэд Z-индексийг CSS. -д хэдий ч бодит байдал дээр элемент ямар ч тохиолдолд тэгш өнцөгт байна.

Үйл явдал, харагдахуйц элементүүд

элемент өөр элементийн дагуу хориглогдсон байна газарт, үйл явдал энэ нь ажиллахгүй байгаа юм. Ерөнхийдөө байдлаар зүйл нь нүдний өмнө гарч байвал тэр нь бас олдоц бүс юм.

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

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

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

Зураг хэлбэр

дүрс ямар ч газар чухал ач холбогдолтой барилгын материал байдаг болохоор (гоо сайхан, орчин, боломж нь - зүйлийг ердийн хэм хэмжээ юм), дүрс хэлбэр сонголт нь чухал ач холбогдолтой юм.

Гэхэд, том, та одоо байгаа формат бүх төрлийн ашиглаж болно, гэхдээ хэрэгжүүлэх боломж болон үр дүнгийн хувьд статик зураг, * .gif нь * .png хязгаарлах нь маш боломжийн юм - хүүхэлдэйн зураг байна. Алдартай * .jpg ч бас сайн байдаг, гэхдээ энэ нь уян хатан дэлгэц орон зай ажиллахын тулд зөвшөөрдөггүй.

Browser алдаанууд болон хөгжүүлэгч

байн байн хэрэг, CSS Z-индекс нь ажиллахгүй байгаа үед, гэхдээ энэ нь тохиолддог байх. Cascading Style Sheets нөхцөл үргэлж ажилладаг, загварын файлын хэмжээ нь ихэвчлэн томоохон хэмжээний хүрнэ. ямар нэг зүйл харагдах юм биш, эсвэл зүгээр л байх ёстой юу байхгүй бол, эхлээд өөрийн кодыг шалгаад дараа нь таны вэб хөтөч кэш цэвэрлэх, дахин өөрийн кодоо шалгах ёстой.

HTML болон CSS тайлбарлах, вэб хөтчийн алдаа хийж чадахгүй вэ, бараг юм - энэ нь axiom юм. хүссэн зүйл нь юм бол, дараа нь, дизайн нь CSS {Албан тушаал: үнэмлэхүй; Z-индекс: 112233; Зүүн талд: 10px; TOP: 20px; } ... ямар нэг зүйл байхгүй буюу бүртгэнэ.

хамгийн түгээмэл алдаа - буруу үзүүлсэн элемент үнэмлэхүй болон харьцангуй байрлал дээр өөрийн алсын барааны харагдац нь иш байхгүй байна. Заримдаа энэ нь элемент дээр шууд хэв маягийг зааж ажиллаж, түүний хэв маяг биш юм байна. Сүүлийн тохиолдолд, энэ нь нэг арга зам юм, гэхдээ энэ нь үндсэндээ код алдаа зарим нэг төрлийн тухай ярьж байна.

Style ангид, эсвэл ID хэв маяг байх ёстой. байх ёстой зөвхөн онцгой тохиолдолд элемент дээр загварын заагч.

jQuery.css (Z-индексийг 123) ашиглах нь анги буюу таниулагч хэрэглэж Хэрэв үгүй бол алдаа хүргэж болох юм. Үүнээс гадна, jQuery - нь үнэхээр гайхалтай хөгжлийн арга хэрэгсэл. Гэсэн хэдий ч, та нар үүнийг хэрэглэнэ өмнө бодох нь гэмтээхгүй байх: сайжруулан гэсэн үг HTML / CSS, Z-индекс нь чөлөөлж хийх боломжтой юм - тэр даруй анхаарал шаардаж болохгүй вэ дүрэм биш юм.

логик давхаргын зөв хөдөлгөөн, болон

Төгс Page - хавтгай. Ямар ч тохиолдолд, хол асар их хэмжээний бодит гурван хэмжээст хөргийн өмнө, энэ ялангуяа шаардлагатай байна. Орчин үеийн вэб сайт - энэ нь бодит туршлага, бодит ертөнц үүрэг юм. Тэд зүгээр л сайн ажиллаж, хавтгай гурван хэмжээст дүрсийг харуулах хэрэгтэй.

Дашрамд хэлэхэд, үзэгдэл буух хуудасны тохируулгууд "сайт барилга" хэлбэрээр (буух хуудас) - хамгийн сайн нотолгоо гэж хавтгай дөрвөлжин хэлбэртэй, хуурай, гэхдээ маш нарийн агуулга - бас сайн, практик. Гэхдээ энэ нь тэмдэглэх нь зүйтэй гэсэн гол зүйл нь гацсан монополь компаниудын сайтууд - компани, түүний ажиллагаа, эрчим хүчний үйлдвэрлэлийн нүүр царай. Энэ нь жижиг бизнес эрхлэгчид тулгарч, Дагалдах хэрэгсэл, Herbalife-ийн болон бусад дээ - Мэдээллийн технологийн Monsters гэж буух хуудас мэдэрсэн "үнэт эдлэл."

Хэрэв шиг, үгүй, зөв үнэн хэрэгтээ, ирээдүйн харуулах болно. Энэ давхарга нь агуулга, будаг, гэхдээ бас вэб хуудас бүтээх ямар ч хувилбарын үед тэдний хооронд зохистой хөдөлгөөнийг хангах нь зөвхөн ач холбогдолтой байх нь чухал юм.

Маш сайн шийдэл - AJAX (хуудас шаардлагатай бол шинэчлэгдэж байдаг). Бүр илүү ирээдүйтэй шийдэл хуудсанд энэ нь браузер цонхны энэ үед зайлшгүй шаардлагатай байгааг харуулж байна.

Ер нь, Z-индекс - энэ нь энгийн дүрэм CSS. Үүний зорилго нь - тийм хөтөч энэ элементийн дэлгэцийн элемент ба нэг хэсэг харагдахуйц байх үед тодорхойлж болно тагийн түвшинг харуулж байна. Layer болон хуудасны - маш харьцангуй ойлголт, энэ хуудсыг боловсруулж, дүрэм Z-индексийн утга өөр өөр агуулга дэлгэц нь санаж байх нь асуудалтай байгаа учраас.

Ихэвчлэн, хөгжүүлэгч дуртай хэд хэдэн сонгож, мөн дараалан бүх хаягууд руу өгч, бид ямар нэг байдлаар гарч зогсох хэрэгтэй байгаа нь, дараагийн тоо томилно. давхаргууд болон хуудасны түвшинд ач холбогдол - ялангуяа, дэвшилтэт, ирээдүйтэй үйл ажиллагаа биш юм.

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