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