Стилдерди менен Positioning айкалыштырып Elements
интернет барак жайгаштыруу үчүн CSS Positioning менен чакырыктардын бири-бир элементтеринин башкаларга дал мүмкүн. Бул HTML акыркы элементи чокусуна болууну кааласак жакшы иштейт, бирок долбоор болсо, учурда эмес, же элементтер ээ болгубуз келсе, эмне, анткени башкаларга да ошентип бири-бирин эмес, бул "катмарлуу" карап чакырат ? элементтер кайчылашып жолун өзгөртүү үчүн сиз CSS мүлкүн пайдалануу керек.
Сиз Adobe Photoshop сыяктуу Сөзүнө жана PowerPoint же күчтүү сүрөт редакторго сүрөттөр аспаптарды колдонгон болсо, анда балким сиз иш Z-индекси сыяктуу бир нерсе көргөн эмес. Бул программалар, сиз объект (лер) силер тартылып койгонбуз, же документтин айрым элементтерин "алдыңкы менен алып кел", "кайра жөнөтүү" үчүн тандоо баса белгилесек болот. Photoshop-жылы бул иш-милдеттерин, ал эми программанын "катмар" тактага бар жана бул катмарларды планы бир элементи күчү менен түшүп кайда уюштура аласыз жок. Бул мисалдардан да, сиз негизинен ошол объекттердин Z-индекси алынган.
Z-индекси деген эмне?
Сиз беттеги элементтерин жайгаштыруу үчүн CSS Positioning колдонуп жатасыз, сиз үч өлчөмдүү ойлонуу керек. эки стандарттуу өлчөмдөрү бар: сол / оң жана жогорку / төмөнкү. оң көрсөткүчкө сол төмөнкү бир жогорку ж-индекси, ал эми X-индекси деп аталат. Бул эки индекстерин колдонуп, туурасынан же тигинен элементтерин жайгаштыруу кантип болуп саналат.
желе дизайн келгенде, ошондой эле бетине тизүү тартиби бар. беттеги ар бир элемент башка бир элемент жогору же төмөн катмардуу болот. Z-индекси менчик кабат ар бир элементи жерде аныктайт. х-индекси жана ж-индекси туурасынан жана тигинен саптары бар болсо, анда Z-индекси бетине тереңдик жатат, 3-өлчөм.
Мен кагаз даана катары сайтында элементтердин ойлонуп көрөм, ал эми интернет барак бир курак эле өзү. Мен кагаз абалы менен аныкталат жатып, Z-индекси башка элементтери менен капталган, ал канчалык жерде.
Z-индекси бир катар, же оң (мисалы, 100-бет) же терс (мисалы, -100) болуп саналат. демейки Z-индекси 0. жогорку Z-индекси менен элемент кийинки төмөн Z-индексинин жогорку ж.б.у.с. чейин баш жагында, болуп келет. эки элемент бар болсо, ошол эле Z-индексинин мааниси (же болбосо аны пайдалануу буга 0 демейки маани мааниси аныкталган эмес болуп) браузер алар HTML пайда үчүн аларды катмарындагы болот.
Z-индекси кантип колдонсо болот?
Эгер кабат башка Z-индекс мааниси боюнча келген ар бир элементин бер. Мен, мисалы, беш түрдүү элементтер бар болсо, анда:
- элемент 1 - -25-жылдын Z-индекси
- элемент 2 - 82 Z-индекси
- элемент 3 - Z-индекс эмес коюлган
- элемент 4 - 10 Z-индекси
- элемент - 5 Z-индекси -3
Алар төмөнкү тартипте түнөөчү болот:
- элемент 2
- элемент 4
- элемент 3
- элемент 5
- элемент 1
Мен дини ар башка Z-индекси сиздин элементтерин чөнтөк үчүн баалуулуктар менен сунуштайбыз. Бул жолу, кийинчерээк Бетке элементтерди кошуп, анда Z-индекси болсо башка элементтерден баалуулуктарын өзгөртүүгө туруп, аларды катмарындагы бөлмө бар. Мисалы:
- Менин жогорку көпчүлүк элементи үчүн 100
- 0 менин орто элементи үчүн
- -100 менин төмөнкү элементи үчүн
Ошондой эле, эки элементтер бир жана ошол эле Z-индекси баасын бере алат. Бул элементтер толтурулган болсо, алар үстүнө акыркы элементи менен, алар HTML жазылган тартипте көрсөтүлөт.
Белгилей кетчү нерсе, натыйжалуу Z-индекси мүлктү колдонуу элементи үчүн, бул блок деңгээл элемент боло же CSS делосуна "блок" же "саптык-блок" бир ирет колдонуу керек.
Атайга Krynin тарабынан Original макалада. 12/09/16 разм Jeremy Джирард менен.