Каскадты стиль кестелерін қамтитын элементтерді орналастыру
Веб беті орналасуы үшін CSS орналасуын пайдалану кезінде туындаған қиындықтардың бірі - сіздің кейбір элементтерің басқаларды бір-біріне сәйкес келтіруі мүмкін. Егер HTML элементіндегі соңғы элементтің үстіңгі жағында болуын қаласаңыз, бұл жақсы жұмыс істейді, бірақ егер сіз оны жасамасаңыз не болмаса, қазіргі уақытта басқалардың қатарына жатпайтын элементтерге ие болғыңыз келсе, бұл дизайн осы «қабатты» көрінуге шақырады ? Элементтердің қабаттасу жолын өзгерту үшін CSS сипатын пайдалану қажет.
Егер сіз Word және PowerPoint бағдарламаларында графикалық құралдарды қолдансаңыз немесе Adobe Photoshop секілді күшті сурет өңдегішін пайдалансаңыз, онда z-индексі әрекетінде іс жүзінде бір нәрсе көрдіңіз. Осы бағдарламаларда сіз жасаған объектілерді белгілей аласыз және құжаттың кейбір элементтерін «Артқа жіберу» немесе «Алға әкеліңіз» опциясын таңдаңыз. Photoshop бағдарламасында сізде бұл функциялар жоқ, бірақ сізде «қабат» бағдарламасының тақтасы бар және элементті осы қабаттарды қайта өңдеу арқылы кенепте түсетін орынды реттеуге болады. Осы мысалдардың екеуінде сіз шын мәнінде осы нысандардың z-индексін орнатасыз.
Z-индексі дегеніміз не?
Элементтерді беттегі орналастыру үшін CSS орналасуын пайдаланғанда, сіз үш өлшемде ойлауыңыз керек. Екі стандартты өлшемдер бар: сол жақ / оң жақ және жоғарғы / төменгі. Солдан оңға қарай индекс индексі x-индекс ретінде белгілі, ал жоғарғыдан төменгі - y-индексі. Элементтерді осы екі көрсеткішті пайдаланып көлденең немесе тігінен орналастыруға болады.
Веб-дизайнға келгенде, беттің стекциялық тәртібі де бар. Беттегі әрбір элемент кез келген басқа элемент үстінде немесе төменгі жағында болуы мүмкін. Z-index сипаты әр элементтің қай жерде екенін анықтайды. Егер x-индексі және y-индексі көлденең және тік сызықтар болса, онда z-индексі беттің тереңдігі, негізінен, 3-өлшем.
Мен веб-беттегі элементтерді қағаз беттері ретінде және веб-беттегі коллаж ретінде ойлау ұнайды. Мен қағазды орналастырған жерді позициялау арқылы анықтайды және басқа элементтермен қаншалықты жабылғаны z-индексі болып табылады.
Z-индексі - бұл оң (мысалы, 100) немесе теріс (мысалы -100). Әдепкі z-индексі 0 болып табылады. Ең жоғары z-индексі бар элемент жоғарғы жағында, одан кейін ең төменгі z-индексіне дейін ең жоғары және төменгі деңгейде болады. Егер екі элемент бірдей z-индекс мәніне ие болса (немесе ол анықталмаған, әдепкі 0 мәнін қолданатын болса), браузер оларды HTML-да пайда болған тәртіпте орналастырады.
Z-индексін қалай пайдалануға болады
Қажетті әрбір элементті стекке басқа z-индекс мәнін беріңіз. Мысалы, егер менде бес түрлі элемент бар болса:
- элемент 1 - z-индексі -25
- элемент 2 - z-индексі 82
- элемент 3 - z-индексі орнатылмаған
- элемент 4 - z-индексі 10
- элемент 5 - z-индексі -3
Олар келесі тәртіпте жиналады:
- элемент 2
- элемент 4
- элемент 3
- элемент 5
- элемент 1
Элементтерді жинақтау үшін әртүрлі z-индекс мәндерін пайдалануды ұсынамын. Осылайша, егер бетке кейінгі элементтерді қоссаңыз, басқа элементтердің z-индекс мәндерін реттемей, оларды қабаттауға арналған бөлме бар. Мысалға:
- 100 менің ең жоғарғы элементім үшін
- 0 орта элементім үшін
- -100 төменгі элементім үшін
Сіз сондай-ақ екі элементті бірдей z-индекс мәнін бере аласыз. Егер бұл элементтер жинақталған болса, олар HTML-да жазылған ретпен көрсетіледі, жоғарғы жағында соңғы элемент болады.
Бірде-бір элемент z-index сипатын тиімді пайдалану үшін ол блоктық деңгей элементі болуы керек немесе CSS файлыңыздағы «блок» немесе «inline-block» дисплейін пайдалану керек.
Дженнифер Крининнің түпнұсқа мақаласы. Jeremy Girard-тың 12/09/16 редакциясында жасалды.