Елементи позиционирања на веб страници са својством ЦСС положаја

Може 2, 2024

Пре каскадног листа стилова, били сте ограничени у контроли коју сте имали над положајем објеката на вашој веб страници. Можете користити ХТМЛ табелу да бисте мало контролисали позиционирање, али то није било баш прецизно. Сада помоћу ЦСС-а, можете прецизно да надгледате како се сваки елемент налази на вашој веб страници.

Пре него што можете да употребите својство положаја ЦСС за позиционирање елемената на својој веб страници, морамо да разговарамо о терминологији која се користи за комуникацију са веб прегледачем. ЦСС не узима у обзир само ширину и висину веб странице, већ и димензије веб прегледача.

Ширина и висина прегледача
У почетку бисте могли помислити да се то односи на отворени прозор прегледача. Али то се заиста односи на читав прегледач укључујући и контроле и дугмад.
Ширина и висина уживо
Ово је израз за подручје приказа прегледача. Не укључује контроле.
Ширина и висина документа
Ово је цела ширина и висина ваше веб странице. Ако су ове димензије веће од ширине и висине уживо, прегледач ће по потреби приказати траке за помицање.

Сада када знате изразе за границе у којима можете позиционирати делове ваше веб странице помоћу ЦСС, погледајмо четири вредности положаја.

Статички
Ово је подразумевано. Ако за елемент не наведете другачије, прегледач ће користити статичко позиционирање. Као што звучи, са статичким позиционирањем не можете постављати елементе на веб страницу. Па како прегледач одређује где да стави сваки објект на своју веб страницу? Сваки елемент позиционира у редоследу у вашем ХТМЛ коду. Ако имате слику логотипа, затим поздрав, а затим обавештење о ауторским правима у вашем ХТМЛ-у, прегледач ће их поставити на веб страници тим редоследом. Поступак не можете преместити изнад слике логотипа.
У односу
Релативно позиционирање дјелује исто као и статичко по томе што редослијед елемената у ХТМЛ коду контролише проток елемената на страници. Међутим, можете користити релативно позиционирање за контролу положаја елемента у односу на остале елементе на веб страници.
Апсолутно
Када користите апсолутно позиционирање са елементом, то ће овај елемент учинити неовисним од остатка веб странице. Пошто његово постављање више није одређено редоследом ХТМЛ-а, за постављање елемента требате користити координате Кс и И.
Фиксно
То дјелује исто као и апсолутно позиционирање. Међутим, елемент који има фиксно позиционирање се неће помицати са веб страницом. Ово је лепа функција коју користите за логотип или мени који желите да остану видљиви док се страница креће према горе.

Видео Упутства: JavaScript for Web Apps, by Tomas Reimers and Mike Rizzo (Може 2024).

Елементи позиционирања на веб страници са својством ЦСС положаја, ХТМЛ, ЦСС, својством позиције ЦСС, статичким позиционирањем, релативним позиционирањем, апсолутним позиционирањем, фиксним позиционирањем, како позиционирати елементе на веб страници, користите ЦСС за позиционирање елемената на веб страници

Претходни Чланак

Sledeći Чланак

Повезани Чланци

рачунари

ГеноПал Про од Генометри - 2

Може 2024

Поред тога што започињете једном почетном бојом, која је стандардни режим програма, можете да имате и две почетне боје. Овај режим дуо-боја ће израђивати палету боја на основу ваше две почетне боје....

рачунари

РАГЕ ПЦ Гаме Ревиев

Може 2024

Пост-апокалиптична ФПС / борбена игра за возила, „РАГЕ“ покушава да испоручи брзи игри, али се спушта с непотребним РПГ елементима. "РАГЕ" је производ Ид софтвера, познатији по играма попут Доом и...