Position Relative - што гэта? падрабязнае апісанне

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

Аднак перш чым стаць дасведчаным вярстальшчыкі, кожны пачатковец праводзіць процьму часу, вывучаючы розныя інструкцыі і спецыфікацыі як па мове HTML, так і па яго саюзніку - CSS. Менавіта пра тое, што такое CSS, для чаго ён патрэбны і якія «фінты вушамі» дазваляе вытвараць, а таксама аб адным з яго папулярных уласцівасцяў - Position Relative - мы сёння і пагаворым.

Што такое CSS?

Абрэвіятура CSS можа быць расшыфраваная і перакладзеная на рускую мову як «каскадныя табліцы стыляў». Гучыць даволі дзіўна - з аднаго боку, здавалася б, і словы зразумелыя, а з другога - агульны сэнс улоўліваецца далёка не адразу. Пачнем з простага - са стыляў. Дадзеная тэхналогія дазваляе надаваць аб'ектах на старонцы пэўныя характарыстыкі, якія тычацца вонкавага выгляду, якія можна прапісаць толькі аднойчы, а выкарыстоўваць бясконцую колькасць разоў.

Слова «табліцы» ў афіцыйным перакладзе аказалася практычна выпадкова - на самай справе слушней тут было б ўжыванне слова «лісты» або «спісы», тым не менш аўтары першапачатковага перакладу вырашылі, што на табліцу CSS падобны больш, чым на спіс, і хто мы такія, каб зараз іх судзіць.

Нарэшце, слова «каскадныя». Справа ў тым, што кожны элемент можа мець адразу некалькі стыляў, якія могуць змешвацца або нават перасякацца. У падобных выпадках браўзэру прыходзіцца звяртацца да шэрагу правілаў, каб правільна скампанаваць знешні выгляд блока, у якога апынулася некалькі стыляў, пры гэтым адзін з іх, напрыклад, мае ўласцівасць Position Relative, а другі - Position Absolute. На самай справе падобныя канфлікты дапускаць нельга, але ў буйных праектах падобная блытаніна адбываецца даволі часта.

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

Для чаго трэба ўласцівасць Position?

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

Якія значэння можа прымаць ўласцівасць Position?

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

• Position Inherit. Дадзенае ўласцівасць дазваляе скапіяваць дадзеныя пра пазіцыю ў элемента, які з'яўляецца бацькоўскім. Напрыклад, калі ў вас ёсць div з паказаным Position Relative, то упісаны ў яго IMG са значэннем inherit таксама атрымае значэнне Relative.
• Position Static. Дадзенае значэнне надаецца ўсіх элементам аўтаматычна, калі не пазначана якое-небудзь іншае. Элементы ўпісваюцца ў пазіцыю па меры згадкі ў кодзе і недаступныя для розных «вынаходстваў», якія дазваляюць мяняць іх становішча.
• Position Absolute. Да гэтага значэння ўласцівасці Position даволі часта звяртаюцца ў тых выпадках, калі неабходна стварыць «плавае» элемент. Валодаючы дадзеных значэннем ўласцівасці, элемент застаецца «нябачным» для астатніх складнікаў старонкі. Гэта значыць, яны размяшчаюцца так, нібы нашага абсалютнага элемента зусім не існуе. Сам жа ён будзе заўсёды заставацца на месцы, па-за залежнасці ад таго, як далёка была прокручена старонка.
• Position Fixed. Шмат у чым гэта значэнне падобна на папярэдняе, аднак, у той час як абсалютны элемент прывязваецца да бацькі, фіксаваны выкарыстоўвае выключна каардынаты верхняга левага кута экрана браўзэра, не звяртаючы ўвагі на астатнія элементы, якія яму папярэднічалі.
• Нарэшце, Position Relative. Дадзены тып значэння дазваляе размяшчаць элемент адносна астатніх, што можа быць карысна пры стварэнні адаптыўнай разметкі, званай у просты «гумовай». Маючы дадзенае ўласцівасць, элемент будзе «рассоўваць» астатнія, не губляючы магчымасці мяняць сваё размяшчэнне на старонцы.

Асаблівасці працы з Position ў розных браўзэрах

Не ўсе браўзэры аднолькава сумяшчальныя. У той час як большасць альтэрнатыўных праграм для інтэрнэт-серфінгу без якіх-небудзь замінак ўспрымаюць значэнне Position абсалютна дакладна, «хранічна асаблівы» Internet Explorer разглядае дадзенае ўласцівасць у залежнасці ад сваёй версіі.

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

Астатнія ж аглядальнікі спакойна апрацоўваюць Position з першых версій, за выключэннем Opera, якая абзавялася падтрымкай дадзенага ўласцівасці ў сваёй 4 варыяцыі, якая выйшла ў сярэдзіне 90-х.

Праца з Position ў Javascript

На самай справе аповед пра тое, як варта працаваць з уласцівасцю Position ў Javascript, мы ўключылі толькі дзеля прыстойнасці. Так як дадзенае ўласцівасць не валодае якімі-небудзь спецзнакамі у назве, выкарыстоўваць JS можна без якіх-небудзь змяненняў, напрыклад, каб задаць для div Position Relative, варта ўключыць такі радок: div.style.position = 'relative'.

Як бачыце, усё даволі проста.

Чаму Position Relative заслугоўвае асаблівай увагі?

У той час як вялікая частка значэнняў ўласцівасці Position, мякка кажучы, «плявала» на навакольныя элементы, выкарыстоўваючы значэнне "style position: relative", варта заўсёды памятаць пра ўсю старонцы ў цэлым, бо няправільнае яго выкарыстанне можа моцна «перакасіць» усё змесціва экрана .

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

Калі варта выкарыстоўваць адноснае пазіцыянаванне?

Акрамя вёрсткі звычайных старонак HTML, Position Relative часта ўжываецца для стварэння розных цікавых эфектаў. Напрыклад, калі вы хочаце, каб які-небудзь элемент «прыязджаў» на старонку ці ж, наадварот, плаўна адпраўляўся за яе боку, то менавіта дадзенае ўласцівасць можа дапамагчы вам рэалізаваць гэты «фінт».

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

Акрамя таго, у некаторых выпадках магчыма стварэнне «гібрыдных» значэнняў Position Relative. CSS хоць і не дазваляе адначасова задаць нешта накшталт position: absolute relative, але, выкарыстоўваючы некаторыя хітрасці, усё-ткі можна дамагчыся дадзенага эфекту. Гэты падыход можа спатрэбіцца ў тых выпадках, калі неабходна стварыць што-небудзь накшталт складанай ўсплывальнай падказкі або кантэкстнага меню. Разглядаючы прыклады, мы абавязкова прывядзем апісанне структуры падобнага «гібрыд».

Прыклады выкарыстання адноснага пазіцыянавання

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

Пачнем з «выбягала» радка. Выкажам здагадку, у вас паўстала неабходнасць у элеменце, які будзе «выязджаць» з-за левага краю экрана і паступова рухацца да яго правай баку. Каб рэалізаваць падобны «механізм», варта ўсталяваць position: relative; left: -100px, дзе -100 - прыкладныя лік пікселяў, складнікаў шырыню блока. Падобны стыль дазволіць вам схаваць блок за межамі экрана, усталяваўшы яго на «стартавую пазіцыю». Зараз можна выкарыстоўваць скрыпт, які будзе кожныя некалькі мілісекунд нарошчваць значэнне ўласцівасці left на адзінку да таго часу, пакуль яно не стане роўным шырыні акна браўзэра мінус шырыня элемента. У выніку мы атрымліваем блок, які з'яўляецца з-за левага краю, пракатваецца праз увесь экран і «паркуецца» у яго правага боку.

Іншы прыклад дазваляе ствараць «адносна-абсалютныя» элементы. Напрыклад, вы можаце ўпісаць абсалютны ўнутр іншай, які мае Position Relative. У выніку ў нас ёсць «адносны» блок, які не мае памеру, у які ўпісаны абсалютны, здольны цяпер выяўляцца ў пазіцыі, якая залежыць ад папярэдніх яму элементаў.

Тыповыя памылкі пры выкарыстанні Position Relative

Найбольш распаўсюджанай памылкай пры выкарыстанні Position Relative з'яўляецца тое, што многія вярстальшчыкі забываюць пра здольнасць рэзерваваць месца пад блок, які можа знаходзіцца дзе заўгодна. Напрыклад, калі ў вас ёсць даволі буйны, размешчаны за межамі экрана і які мае адноснае пазіцыянаванне, на яго месцы будзе зиять «дзірка». Зрэшты, нават гэта ўласцівасць, часам якое стварае пэўныя нязручнасці, можна выкарыстоўваць на карысць, напрыклад, ствараючы цікавы эфект «самазбіраюцца» сайта, у якім усе яго блокі паступова змяшчаюцца на пазіцыю top: 0; left: 0; т. е. на сваё арыгінальнае месца.