CSS z-index: агляд, ўласцівасці

Правіла CSS z-index - пазіцыя элемента старонкі па каардынаце Z: узровень адлюстравання элемента або пласт, у якім ён знаходзіцца. Тэг, у якога z-index больш, будзе адлюстроўвацца ў поўным аб'ёме. Тэгі адлюстроўваюцца па парадку іх прытрымлівання ва ўваходным струмені і накладваюцца адзін на аднаго. приоритет видимости. Значэнне z-index вызначае прыярытэт бачнасці.

Трэба аддаць належнае сучасным браўзэрам і алгарытмам адлюстравання элементаў. З часоў, калі графіка авалодала экранамі і ўтварылася праблема адсячэння бачных і нябачных частак элементаў у вокнах прыкладанняў, тэхналогія адлюстравання бачнага кантэнту дасягнула выдатных вынікаў. У акне браўзэра ўсе элементы адлюстроўваюцца правільна, карыстальнік бачыць толькі тое, што вызначана дызайнам або распрацоўшчыкам.

Агульнае правіла: парадак і ўзровень

Ўваходны струмень (старонка, сфарміраваная серверам) чытаецца браўзэрам паслядоўна. Усе тэгі адлюстроўваюцца ў адпаведнасці з правіламі CSS і могуць накладвацца адзін на аднаго.

У гэтым прыкладзе апісана чатыры бачных элемента. Кожны наступны перакрывае сабой папярэдні. У месцах, дзе тэгі перасякаюцца, узнікае пытанне прыярытэту. Паколькі правіла z-index CSS ва ўсіх гэтых тэгаў аднолькава і роўна 848, то бачным будзе той элемент, які ідзе наступным. Усё, што выглядае з-пад кожнага наступнага элемента, мабыць.

правіла бачнасці

Браўзэры выконваюць правіла бачнасці выключна «сумленна». Прыдумаць алгарытм, па якім можна оптам прааналізаваць усе накладання і прымяніць толькі тыя, якія рэальна перасякаюцца без уліку тых участкаў, якія паглынаюцца кожным наступным элементам, - вельмі складана.

У большасці выпадкаў гэта не трэба. Сучаснае абсталяванне працуе вельмі хутка, і заўважыць перамалёўкі элемента да таго моманту, калі яе перакрые наступны элемент, вельмі праблематычна.

Ўплыў на паслядоўнасць элементаў

Дастаткова у трэцяга тэга scCSS3 павялічыць значэнне z-index, а ў scCSS4 - яго паменшыць, як агульная карцінка змяняецца. Пры гэтым паслядоўнасць прытрымлівання элементаў у патоку застаецца ранейшай:

• id= 'scCSS1'; div id = 'scCSS1';
• id= 'scCSS2'; div id = 'scCSS2';
• id= 'scCSS3'; div id = 'scCSS3';
• id= 'scCSS4'. div id = 'scCSS4'.

Варта звярнуць увагу на тое, што другая малюнак на самай справе займае больш месца, чым здаецца. Трэцяя карцінка таксама. Акрамя таго, яна складаецца з двух частак (два яйкі), якія знаходзяцца на адлегласці адзін ад аднаго.

Рэальныя памеры абласцей, якія займаюць другая і трэцяя карцінкі, вылучаныя жоўтым і шэрым кветкамі адпаведна.

Сумяшчэнне z-index з background-color

Варта звярнуць увагу, што ўласцівасці CSS background & z-index дапаўняюць адзін аднаго. Усе блокавыя элементы, ды і любыя іншыя, заўсёды займаюць прастакутную вобласць, якi ўтвараецца максімальнай вышынёй і максімальнай шырынёй змесціва.

Выкарыстоўваючы малюнкі, можна надаць любую форму вобласці элемента, але вакол яго заўсёды будзе прастакутнік. Гэта факт, які важна правільна ўлічваць.

Можна размясціць тэкст па контуры абранай фігуры, але калі гэтага не зрабіць, то кантэнт трапляе ў любы элемент, як у прастакутную скрынку, прычым паслядоўна, па меры паступлення з уваходнага струменя.

Выкарыстанне ўласцівасці CSS z-index у элеменце, якога background-color мае значэнне transparent (свайго роду празрыстасць), дазваляе эмуляваць любы контур элемента. Хоць у любым выпадку ў рэальнасці элемент будзе прастакутным.

Падзеі і бачнасць элемента

У месцах, дзе элемент перакрыты іншым элементам, падзеі на ім працаваць не будуць. Па агульнаму правілу, калі элемент па-за зонай бачнасці, ён таксама па-за зонай даступнасці.

Калі распрацоўшчык жадае заблакаваць кнопку або элемент меню, ён цалкам можа змясціць над блокіруемым тэгам іншы тэг, магчыма, празрысты (напрыклад, выкарыстоўваючы правіла CSS opacity), але ў любым выпадку мае больш высокі CSS z-index.

Паколькі падзеі, з карыстацкай пункту гледжання, можна падзяліць на якія маюць значэнне і якія не маюць такога, то апошнія (перасоўванне мышкі, выпадковае націск кнопкі на клавіятуры, сігнал таймера) можна выкарыстоўваць для адэкватнага змены кантэнту ў акне браўзэра.

Просты прыклад: наведвальнік перамясціў паказальнік мышы на элемент меню, але яшчэ не прыняў рашэнне што-небудзь зрабіць. Распрацоўшчык мог бы прадугледзець гэтую падзею, адсачыць рух да патрэбнай кропцы дыялогу (клік - наведвальнік прымае рашэнне) і адлюстраваць адэкватны кантэнт. Правіла CSS z-index як нельга лепш падыходзіць для такога выпадку.

фармат малюнкаў

Паколькі выявы з'яўляюцца важным будаўнічым матэрыялам для любога сайта (прыгажосць, сучаснасць, функцыянальнасць - ужо звыклая норма рэчаў), вялікае значэнне мае выбар фармату для малюнкаў.

Па вялікім рахунку можна выкарыстоўваць усю разнастайнасць дзеючых фарматаў, але з пункту гледжання практычнасці і эфектыўнасці цалкам разумна абмежавацца * .png для статычных малюнкаў і * .gif - для анімаваных малюнкаў. Папулярны * .jpg таксама добры, але ён не дазваляе гнутка маніпуляваць прасторай адлюстравання.

Памылкі браўзэра і распрацоўніка

Не так часта ўзнікае сітуацыя, калі CSS z-index не працуе, але такое здараецца. Правілы табліцы каскадных стыляў працуюць заўсёды, а аб'ём стылявога файла часта дасягае значных аб'ёмаў. Калі нешта не так адлюстроўваецца або проста няма таго, што павінна быць, трэба спачатку праверыць уласны код, потым ачысціць кэш браўзэра і зноў праверыць уласны код.

Інтэрпрэтуючы HTML і CSS, браўзэр практычна не дапускае памылак - гэта аксіёма. Калі патрэбнага элемента няма, значыць, у канструкцыі CSS {position: absolute; z-index: 112233; left: 10px; top: 20px; ...} нешта прапушчана або запісана не так.

Самая распаўсюджаная памылка - няправільна пазначаны каардынаты элемента, прапушчана ўказанне на яго бачнасць, на абсалютнае або адноснае становішча. Часам можа спрацаваць ўказанне стылю непасрэдна на элеменце, а не ў яго стылі. У апошнім выпадку гэта выхад з сітуацыі, але гэта перш за ўсё кажа пра нейкую памылку ў кодзе.

Стыль павінен быць паказаны ў стылі класа або ідэнтыфікатара. Паказваць стыль на элеменце варта толькі ў выключных выпадках.

Выкарыстанне jQuery.css (z-index, 123) таксама можа прывесці да памылкі, калі ўжыта а не да таго класу або ідэнтыфікатары. Акрамя таго, jQuery - сапраўды выдатны інструмент распрацоўніка. Аднак перш чым яго ўжываць, не перашкодзіць падумаць: ці нельга абыйсціся падручнымі сродкамі HTML / CSS, z-index - не такая правіла, якое не мае патрэбы ў пільнай увазе.

Правільныя пласты і лагічнае перасоўванне

Ідэальная старонка - плоская. Ва ўсякім выпадку да рэальнага аб'ёмнага малюнка ў масавым маштабе далекавата, ды і няма ў гэтым асаблівай неабходнасці. Сучасныя сайты - гэта рэальная практыка, рэальныя задачы. Яны проста павінны працаваць, ну а плоскія дэманструюць аб'ёмны малюнак.

Дарэчы, з'ява пасадачных старонак (landing page) у форме варыянту «сайтостроения» - лепшае пацвярджэнне таго, што плоскія прастакутныя формы і сухі, але гранічна дакладны кантэнт - таксама добра і практычна. Але варта адзначыць, што сайты кампаній-манапалістаў засталіся пры сваім: галоўнае - твар кампаніі, яе функцыянальнасць і вытворчая моц. Монстры інфармацыйных тэхналогій палічылі, што пасадкавыя старонкі - гэта твар дробнага бізнесу, аксесуараў, гербалайфа і іншай "біжутэрыі».

Так гэта ці не, як на самой справе правільна, пакажа будучыня. Важна, што пры любым варыянце пабудовы сайта мае сэнс не толькі распісаць па пластах кантэнт, але і забяспечыць правільнае перасоўванне паміж імі.

Выдатнае рашэнне - AJAX (старонка абнаўляецца па меры патрэбы). Яшчэ больш перспектыўны рашэнне, калі старонка паказвае тое, што неабходна ў дадзенай кропцы акна браўзэра.

Па сутнасці, z-index - гэта простае правіла CSS. Яго прызначэнне - паказаць ўзровень тэга, каб браўзэр мог вызначыць, калі адлюстроўваць элемент і якая частка гэтага элемента будзе бачнай. Пласт і старонка - вельмі адносныя паняцці, таму як праблематычна распрацоўваць старонку і трымаць у памяці значэння правілы z-index для розных варыянтаў адлюстравання кантэнту.

Звычайна распрацоўшчык выбірае любімае лік і дае яго ўсім тэгах запар, а тым, якім трэба неяк вылучыцца, прызначае наступнае лік. Надаваць значэнне слаям і ўзроўнях старонкі - гэта не асабліва прагрэсіўная і перспектыўная практыка.

Аднак калі перанесці семантыку z-index у вобласць дыялогу з наведвальнікам, то можна стварыць практычны эфект. Аналагічна таму, як тэгі могуць накладвацца адзін на аднаго, можна накласці дыялогі (сайт-наведвальнік) і выканаць перасоўванне паміж імі. З гэтага пункту гледжання прымяненне правілы CSS z-index уяўляецца вельмі мэтазгодным і практычным.