Својство „position” и својства за померање елемената¶
До сада знаш да распоред елемената на веб-страници одређују две особине:
Хијерархијски однос између елемената, односно, где су ти елементи наведени у HTML коду и какав је њихов однос са елементима око њих.
Да ли је елемент линијски или блоковски.
Иако можеш да конструишеш велики број веб-докумената ослањајући се на ове особине, за иоле сложеније дизајне веб-страница, било би значајно да се упознаш са својствима које ти језик CSS нуди како ћеш на најлакши начин довести елементе у распоред који је у складу са дизајном веб-сајта.
Прво својство које ћеш упознати за потребе позиционирања је уједно и најфлексибилније јер ти омогућава прецизну контролу. У питању је својство ”position” које ти дозвољава да управљаш редоследом елемената на веб-страници на четири начина.
Заједно са овим својством се користе и четири наредна својства, која ћемо звати својства за померање елемената:
Својство ”top” говори колико се елемент удаљује од горње ивице на доле.
Својство ”right” говори колико се елемент удаљује од десне ивице у лево.
Својство ”bottom” говори колико се елемент удаљује од доње ивице на горе.
Својство ”left” говори колико се елемент удаљује од леве ивице у десно.
Вредности ових својстава су дужине. Интересантно је напоменути да коришћење негативних дужина мења смер померања у супротан. На пример, навођење декларације ”top: 20px” ће померити елемент на доле за 20 пиксела, док навођење декларације ”top: 20px” ће померити елемент на горе за 20 пиксела.
Примети да нисмо навели од чије ивице се елемент, на које се ова својства примењују, удаљава. То је зато што ово зависи од одабира вредности за својство ”position”. Због тога је важно да упамтиш да се ова четири својства увек наводе заједно са својством ”position” (у истом или неком другом CSS правилу чији селектор обухвата жељене елементе).
Статичко позиционирање¶
Статичко позиционирање представља подразумевани распоред елемената на веб-страници. Наводи се декларацијом ”position: static”. Дакле, веб-прегледач елементе ређа једне поред других (у случају линијских елемената), односно, једне испод других (у случају блоковских елемената). Штавише, при статичком позиционирању, на елементе није могуће деловати својствима за померање елемената.
У наредном примеру су илустрована три елемента ”div” од којих је други позициониран статички (заправо, и први и трећи су подразумевано означени као статички распоређени елементи, док смо другом експлицитно задали ово својство) и уз то су наведена два својства за померање – једно од горње ивице и једно од леве ивице. Међутим, с обзиром да је елемент статички позициониран, ова својства немају никакве ефекте. Због тога, добија се подразумевано понашање, очекивано за блоковске елементе – поређани су један испод другог.
Релативно позиционирање¶
Друга врста позиционирања је релативно и наводи се декларацијом ”position: relative”. Оно се врло лако памти следећом реченицом: ”При релативном позиционирању, елемент се удаљава од оне позиције у којој би се нашао да је позициониран статички.” Дакле, ефекат је сличан као да је веб-прегледач прво позиционирао све елементе на подразумеван начин, а затим је померио све релативно позициониране елементе према наведеним својствима.
Наредни пример се разликује од следећег само по томе што смо променили вредност својства ”position” тако да се примени релативно позиционирање. Примети да други елемент изгледа као је померен за 50 пиксела на доле и за 100 пиксела удесно у односу на позицију из претходног примера.
Још једна важна ствар коју треба да упамтиш јесте да релативно позиционирање не утиче на приказивање других елемената. На пример, у примеру изнад примећујеш да се трећи елемент ”div” налази на истој позицији као и у претходном примеру. Због тога се одаје утисак као да постоји ”празан простор” између првог и трећег елемента ”div”.
Апсолутно позиционирање¶
Да бисмо боље илустровали наредни тип позиционирања, додаћемо једног родитеља нашим трима елементима ”div” и додатно ћемо му додати ивицу и маргину зарад лакше визуализације ефекта апсолутног позиционирања.
Апсолутно позиционирање ”избацује” елемент из регуларног тока распоређивања. Ово можеш да разумеш као да веб-прегледач прво изузме елементе са овим типом распоређивања, затим распореди све елементе статички (и примени релативно позиционирање), па затим врати назад изузете елементе и помера их на одговарајући начин.
Апсолутно позиционирање наводиш декларацијом ”position: absolute”. Померање зависи од тога да ли елемент, који се позиционира апсолутно, има неког нестатички-позиционираног претка или не. У случају да нема, као што је то у наредном примеру, онда ће елемент бити померен у односу на ивицу погледа веб-прегледача (тј. у односу на ивицу елемента ”body”).
Примети у примеру изнад да је други елемент ”div” потпуно занемарио позицију свог (у овом примеру јединог) претка, већ се позиционирао 50 пиксела надоле и 100 пиксела удесно у односу на елемент ”body”.
Међутим, уколико апсолутно позициониран елемент има нестатички-позиционираног претка, као што је то случај са наредним примером, онда ће се елемент позиционирати у односу на ивицу тог претка. Ако елемент има више оваквих предака, онда ће се посматрати онај који му је најближи на путу ка корену DOM стабла.
С обзиром да су апсолутно позиционирани елементи ”избачени” из регуларног тока распоређивања, самим тим ће се и сви остали елементи прилагодити, па због тога у оба примера можеш стећи визуални утисак да се трећи елемент ”div” померио испод првог.
Као што видиш, апсолутно позиционирање је веома сложено, те је важно да самостално осмислиш што више различитих примера и посматраш ефекте примене ових својстава заједно. Искуство је незаменљиво за разумевање позиционирања елемената.
Фиксно позиционирање¶
Последњи тип позиционирања се наводи декларацијом ”position: fixed” и назива се фиксно позиционирање. У питању је још једно позиционирање које ”избацује” елементе из регуларног тока, али је много једноставније за разумевање од апсолутног позиционирања.
Наиме, фиксно позиционирање, као што и назив говори, фиксира елемент у погледу веб-прегледача на позицију на којој је елемент померен у односу на ивицу веб-прегледача. Овако позиционирани елементи остају на додељеној позицији, без обзира на то који део веб-странице је приказан у погледу веб-прегледача.
У наредном примеру ћеш пронаћи, поред стандардних елемената ”div”, још један елемент којем смо подесили велику висину како бисмо симулирали веб-страницу са великим бројем садржаја. Други елемент ”div” је позициониран фиксно, 50 пиксела од горње ивице и 100 пиксела од десне ивице погледа веб-прегледача.
Посматрај како се, приликом померања погледа, сав садржај странице помера, осим елемента који је позициониран фиксно.
Фиксно позиционирање се углавном користи за приказивање важних елемената, као што су навигација највишег нивоа, заглавље или подножје веб-странице. Избегавај коришћење овог типа позиционирања за приказивање рекламног садржаја или другог сличног садржаја јер ово води ка изузетно лошем корисничком доживљају.
Z-позиционирање елемената¶
Приликом распоређивања елемената може да ти се догоди да се неки од елемената преклапају. Како су екрани рачунара дводимензионалне површине, не постоји стварна трећа димензија која одређује ”дубину” на којој се елементи налазе. Ипак, језик CSS подржава својство које се назива Z-индекс и које се може искористити да се елементи распореде и на, виртуалној, трећој оси.
Само својство које се користи је назива ”z-index” и његове вредности су цели бројеви. Што је вредност већа, то има већи приоритет у приказивању (другим речима, то је бити више ”испред” осталих елемената). Подразумевано, сви елементи имају вредност овог својства постављену на 0.
Постоје сложени алгоритми који одређују распоред елемената на истом Z-индексу. Међутим, препоручује се коришћење различитих вредности овог својства за елементе који се преклапају како се не би доводио у питање приоритет приказивања. Такође, и другим програмерима ће бити лакше да разумеју Z-позиционирање елемената на некој веб-страници уколико преклапајући елементи имају различите вредности овог својства.
Са овим знањем моћи ћеш да имплементираш и најсложеније дизајне веб-страница. Као вежбу, покушај да реконструишеш распоред елемената неких од омиљених веб-страница. Уместо коришћења стварног садржаја, за почетак можеш искористити елементе ”div” различитих димензија и боја, као што смо и ми то радили. Овај приступ представља једну од техника израде прототипова (енг. prototype), којима лако можеш да симулираш како би се распоред неке веб-странице понашао, пре него што утрошиш време у обележавању садржаја.