ЦСС позиционирање је више од само Кс, И координата
Постављање ЦСС-а је одавно важан део креирања сајтова. Чак и уз пораст нових ЦСС техника распореда као што су Флекбок и ЦСС Грид, позиционирање и даље има важно место у свакој веб дизајнерској торби трикова.
Када користите позиционирање ЦСС-а, прва ствар коју ћете морати да урадите је да успоставите ЦСС својство за позицију да бисте испричали претраживачу ако желите да користите апсолутно или релативно позиционирање за одређени елемент. Такође морате јасно разумјети разлику између ова два својства позиционирања.
И док су апсолутне и релативне две особине ЦСС карактеристика које се најчешће користе у веб дизајну, у ствари су четири стања у својству позиције:
- статички
- апсолутно
- у односу
- фиксно
Статичка је подразумевана позиција за било који елемент на веб страници. Ако не дефинишете положај елемента, биће статична. То значи да ће се на екрану приказати на основу тога гдје се налази у ХТМЛ документу и како ће се приказати унутар нормалног тока тог документа.
Ако примените правила позиционирања као врх или лево на елемент који има статички положај, та правила ће бити игнорирана и елемент ће остати тамо где се појављује у нормалном протоку документа. У истини, ретко ћете, ако икада, требати поставити елемент на статичку позицију у ЦСС-у, јер је то подразумевана вриједност.
Апсолутно ЦСС позиционирање
Апсолутно позиционирање је вероватно најједноставнија ЦСС позиција за разумевање. Почињете са овом ЦСС особином:
позиција: апсолутно;Ова вриједност говори претраживачу да се оно што треба позиционирати треба уклонити из нормалног тока документа и умјесто тога ставити на тачну локацију на страници. Ово се израчунава на основу најближег не-статички позиционог предака тог елемента.
Пошто се апсолутно позиционирани елемент извлачи из нормалног тока документа, неће утицати на то како су елементи који су пре њега или након тога у ХТМЛ позиционирани на веб страници.
Као пример - ако сте имали подјелу која је била позиционирана користећи вриједност релативног (ми ћемо кратко погледати ову вриједност), ау оквиру те подјеле сте имали параграф који желите поставити 50 пиксела са врха подјеле, ви додао би позицију вриједности "апсолутне" том ставу, заједно са вриједношћу офсет-а од 50пк на "врху" својства, овако.
позиција: апсолутно; топ: 50пк;Овај апсолутно позиционирани елемент би онда увек приказивао 50 пиксела са врха релативно позициониране подјеле - без обзира на то шта се тамо приказује у нормалном току. Ваш "апсолутно" позиционирани елемент је користио релативно позиционирану као свој контекст, а вриједност посјећивања коју користите је релативна за то.
Четири својства позиционирања које имате на располагању су:
- врх
- јел тако
- дно
- лево
Можете користити горњи или доњи део (пошто елемент не може бити позициониран према обе ове вредности) и било десно или лево.
Ако је елемент постављен на позицију апсолутне, али тамо нема статички позиционираних предака, онда ће бити позициониран у односу на елемент каросерије, који је елемент највишег нивоа странице.
Релативно позиционирање
Већ смо поменули релативно позиционирање, па погледајмо сада ту имовину.
Релативно позиционирање користи исте четири особине позиционирања као апсолутно позиционирање, али умјесто да оснује позицију елемента на најближем не-статички постављеном предаку, почиње од тога гдје би елемент био, ако би и даље био у нормалном току.
На примјер, ако на вашој веб страници имате три параграфа, а трећа има ставку "релативан" стил стављен на њега, позиција ће бити оффсет на основу тренутне локације.
<п> Став 1. <п> Став 2. <п стиле = "поситион: релативе; лефт: 2ем;"> Параграф 3У претходном примеру, трећи став ће бити постављен 2ем са леве стране елемента контејнера, али ће и даље бити испод првих два параграфа. Остао би у нормалном току документа, и само би се мало померио. Ако сте је променили на позицију: апсолутно; све што следи биће приказано на врху, јер више не би било у нормалном току документа.
Елементи на веб страници се често користе за постављање вредности положаја: релативан, без успостављене вредности оффсет-а, што значи да елемент остаје тачно тамо где би се појавио у нормалном току. Ово се ради искључиво ради утврђивања тог елемента као контекста против којег други елементи могу бити апсолутно позиционирани. На примјер, ако имате подјелу која окружује вашу целокупну веб локацију са класичном вриједношћу "контејнера" (што је врло уобичајен сценарио у веб дизајну), та подела се може поставити на положај релативног тако да било шта унутар ње може користити као контекст позиционирања.
Шта је фиксно позиционирање?
Фиксно позиционирање је слично апсолутном позиционирању. Положај елемента израчунава се на исти начин као апсолутни модел, али фиксни елементи се онда фиксирају на тој локацији - скоро као водени жиг . Све остало на страници ће затим проћи кроз тај елемент.
Да бисте користили ову вредност својства, поставили бисте:
позиција: фиксна;Имајте на уму, када поправите елемент на мјесту ваше локације, он ће штампати на тој локацији када се одштампа ваша Веб страница. На примјер, ако је ваш елемент фиксиран на врху ваше странице, он ће се појавити на врху сваке одштампане странице - јер је фиксиран на врх странице. Можете користити типове медија да бисте променили начин на који штампане странице приказују фиксне елементе:
@медиа екран {х1 # први {позиција: фиксна; }} @медиа принт {х1 # фирст {позиција: статички; }}Оригинални чланак Јеннифер Кринин. Уредио Јереми Гирард на 1/7/16.