Мавқеи ҷойгиркунии плюрализҳо бо варақаҳои тарзи навишташаванда
Яке аз мушкилоте, ки ҳангоми истифодаи усули CSS барои тарҳбандии веб саҳифа аст, баъзе аз элементҳои шумо метавонанд ба дигарон муқобилат кунанд. Ин кор хуб аст, агар шумо хоҳед, ки элементи охирини HTML дар боло бошад, аммо чӣ бояд кард, агар шумо намехоҳед, ки элементҳоро, ки акнун вуҷуд надошта бошанд, ба инобат гиред, чунки тарҳрезӣ ба ин намуди "зада" Оё Барои тағир додани элементҳои элементӣ, шумо бояд амволи CSS -ро истифода баред.
Агар шумо як абзори графикиро дар Word ва PowerPoint истифода мебаред, ё таҳриргари матнии қавии мисли Adobe Photoshop истифода баред, он гоҳ имкониятҳоро мебинед мисли z-index дар амал. Дар ин барномаҳо, шумо метавонед тасвири ашёеро, ки шумо кашидаед, нишон дода метавонед ва имконоти "Ирсолро бозгаштан" ё "Пешакӣ ба" баъзе унсурҳои ҳуҷҷати шумо интихоб кунед. Дар Photoshop, шумо ин функсияҳоро надоред, аммо шумо "Панели" -ро дар барномаи худ доред ва шумо метавонед дар куҷо ҷобаҷо кунед, ки ин элементро ба воситаи тағирёбандаи ин қабатҳо тағйир диҳед. Дар ин ду мисол, шумо асосан з-index-и ин объектҳоро муқаррар кардаед.
Z-index чист?
Ҳангоме, ки шумо CSS-ро барои ҷойгиркунии унсурҳо дар саҳифа истифода мебаред, шумо бояд дар се андоза фикр кунед. Ду андозаи стандартӣ мавҷуданд: left / right and top / bottom. Сон ба ростқавлии рост ҳамчун x-index маълум аст, дар ҳоле, ки ба боло то поён як y-индекс аст. Ин аст, ки чӣ тавр шумо элементҳоро ба уфуқӣ ё амудӣ, ин ду индексҳоро истифода мебаред.
Вақте, ки дар тарҳрезии веб ба вуқӯъ меояд, тартиби амудии саҳифа вуҷуд дорад. Ҳар як унсури дар саҳифа метавонад дар боло ё поён аз ҷузъҳои дигар ҷойгир карда шавад. Хусусияти Z-index нишон медиҳад, ки дар ҳар як асбоб дар як сатр ҷойгир аст. Агар x-index ва y-index як сатрҳои уфуқӣ ва амудӣ бошад, пас z-index ин қаъри саҳифа, дараҷаи 3-юм аст.
Ман мехоҳам, ки элементҳоро дар як веб саҳифа ҳамчун қисмҳои коғаз фикр кунам, ва саҳифаҳои интернетӣ ҳамчун коллаж. Дар куҷо гузоштани коғаз бо ҷойгиркунӣ муайян карда мешавад ва он чӣ қадар аз тарафи элементҳо фаро гирифта шудааст, z-index.
Z-index ин рақам ё мусбат аст (масалан, 100) ё манфӣ (масалан, -100). Z-index-и пешакӣ 0. Элемент бо баландтарин з-index-ро дар боло ҷойгир аст, пас аз тарафи дигар дар боло ва поён то з-index-и пасттарин. Агар ду элемент арзиши ҳамон z-index дошта бошад (ё он муайян нашудааст, маънои онро дорад, ки арзиши аслии 0-ро истифода мебарад) браузер онҳоро бо тартиби дар HTML пайдо мешавад.
Чӣ тавр истифода бурдани z-index
Ҳар як унсурие, ки шумо мехоҳед дар як сатҳи дигар z-index нишон диҳед. Масалан, агар ман панҷ унсури гуногун дошта бошам:
- element 1 - z-index -25
- element 2 - z-index 82
- элемент 3 - z-index не муқаррар карда нашудааст
- элемент 4 - z-index 10
- element 5 - z-index -3
Онҳо дар фармоиши зерин меистанд:
- 2)
- 4
- элемент 3
- элемент 5
- 1
Ман бо истифодаи унсурҳои гуногуни z-index-ро барои такмил додани унсурҳои худ тавсия медиҳам. Дар ин ҳолат, агар шумо минбаъд элементҳоро ба саҳифа илова кунед, шумо бе он ки қиммати z-index-ро аз ҳамаи дигар элементҳо танзим кунед, онҳоро дар қабати болоӣ ҷойгир кунед. Барои намуна:
- 100 барои ман унсури болотарин
- 0 барои унсури мобайнии ман
- -100 барои унсури поёни ман
Шумо инчунин метавонед ду элементро, ки ҳамон z-index-ро дарбар мегирад. Агар ин унсурҳо сабт карда шаванд, онҳо бо тартиби дар HTML навишташуда, бо унсури охирин дар боло навишта мешаванд.
Як ёддошт, барои унсуре барои истифодаи самараноки моликияти z-index, он бояд унсури сатҳи блок бошад ё нишонаи "блок" ё "интерфейси" -ро дар файли CSS истифода барад.
Мақолаи аслӣ аз тарафи Ҷенифер Кренин. Аз 12/09/16 аз тарафи Ирмия Girard таҳрир карда шуд.