Пазіцыянаванне Перакрыцце элементы з каскаднымі табліцамі стыляў
Адной з праблем пры выкарыстанні пазіцыянавання CSS для макета вэб-старонкі з'яўляецца тое, што некаторыя з вашых элементаў могуць перакрывацца іншым. Гэта добра працуе, калі вы хочаце, каб апошні элемент у HTML, каб быць на вяршыні, але што, калі вы гэтага не зробіце, або тое, што калі вы хочаце мець элементы, якія ў цяперашні час не перакрываюцца іншымі рабіць гэта, таму што праект патрабуе гэта «слоістага» глядзець ? Для таго, каб змяніць спосаб элементаў перакрыцця неабходна выкарыстоўваць ўласцівасць CSS.
Калі вы выкарыстоўвалі графічныя прылады ў Слове і PowerPoint або больш трывалым рэдактар малюнкаў, як Adobe Photoshop, то хутчэй за ўсё, вы бачылі нешта накшталт г-індэкса ў дзеянні. У гэтых праграмах, вы можаце вылучыць аб'ект (ы), якія вы намалявалі, і абярыце опцыю «Адправіць назад» або «угару» пэўных элементаў дакумента. У Photoshop, вы не маеце гэтыя функцыі, але ў вас ёсць «Пласт» панэль праграмы, і вы можаце арганізаваць дзе элемент падае на палатне, пераладжваючы гэтыя пласты. У абодвух гэтых прыкладах, вы, па сутнасці ўстаноўкі Z-індэкс гэтых аб'ектаў.
Што г-індэкс?
Калі вы карыстаецеся пазіцыянаванне CSS для пазіцыянавання элементаў на старонцы, вы павінны думаць у трох вымярэннях. Ёсць два стандартных памераў: левы / правы і верхні / ніжні. Злева направа індэкса вядомы як індэкс х, у той час як зверху ўніз адзін з'яўляецца у-індэкс. Гэта, як вы б размясціць элементы па гарызанталі ці па вертыкалі, з дапамогай гэтых двух індэксаў.
Калі ў даходзіць да вэб-дызайну, ёсць таксама укладванне парадак старонкі. Кожны элемент на старонцы можа быць слаіста вышэй або ніжэй любога іншага элемента. Ўласцівасць Z-індэкс вызначае, дзе ў стэку кожны элемент. Калі х-індэкс і у-індэкс з'яўляюцца гарызантальныя і вертыкальныя лініі, то г-індэкс глыбіні старонкі, па сутнасці, трэцяе вымярэнне.
Мне падабаецца думаць , элементаў на вэб - старонцы ў выглядзе кавалачкаў паперы, і вэб - старонка сама як калаж. Там, дзе я ляжала папера вызначаецца пазіцыянаваннем, і колькі яе пакрыта іншымі элементамі, з'яўляецца Z-індэкс.
Г-індэкс ўяўляе сабой лік, альбо станоўчыя (напрыклад, 100) ці адмоўнае (напрыклад, -100). Г-індэкс па змаўчанні роўна 0. Элемент з найбольшым Z-індэксам знаходзіцца на вяршыні, а затым наступны вышэйшым і гэтак далей аж да самага нізкага г-індэкс. Калі два элемента маюць аднолькавае значэнне Z-індэкс (ці ён не вызначаны, гэта значыць выкарыстоўваць значэнне па змаўчанні 0), браўзэр будзе пласт іх у парадку іх з'яўлення ў HTML.
Як выкарыстоўваць Z-індэкс
Дайце кожны элемент вы хочаце ў вашым стэку іншага значэння Z-індэкс. Напрыклад, калі ў мяне ёсць пяць розных элементаў:
- Элемент 1 - Z-індэкс -25
- элемент 2 - Z-індэкс 82
- элемент 3 - Z-індэкс не ўстаноўлены
- элемент 4 - г-індэкс 10
- Элемент 5 - г-індэкс -3
Яны размяшчаюцца ў наступным парадку:
- элемент 2
- элемент 4
- элемент 3
- элемент 5
- элемент 1
Я рэкамендую выкарыстоўваць зусім розныя значэнні Z-індэкс, каб складваць вашыя элементы. Такім чынам, калі дадаць больш элементаў на старонку пазней, у вас ёсць пакой для накладваюць іх без неабходнасці змяняць значэння Z-індэкс ўсіх астатніх элементаў. Напрыклад:
- 100 для майго самага верхняга элемента
- 0 для майго сярэдняга элемента
- -100 для майго ніжняга элемента
Вы таксама можаце даць два элемента аднолькавае значэнне Z-індэкс. Калі гэтыя элементы выкладзеныя, яны будуць адлюстроўвацца ў парадку, яны напісаныя ў HTML, з апошнім элементам на вяршыні.
Адна заўвага, для элемента, каб эфектыўна выкарыстоўваць ўласцівасць Z-індэкс, ён павінен быць элемент ўзроўню блока або выкарыстоўваць дысплей «блок» або «ўбудаваны блок» у вашым файле CSS.
Арыгінал артыкула Джэніфер Krynin. Дата абнаўлення 12/09/16 Джэрэмі Girard.