Позициониране на елементи в Html чрез Css

Митака

2055 прегледа

Та нека бъда кратък (слушайте внимателно, няма да повтарям), за да разберете какво пиша тук трябва да имате елементарни знания по HTML & CSS. Ако нямате, натрупайте ги чрез тoзи урок

Свойството position на елемента позволява да се зададе начина на неговото позициониране на страницата - дали то ще бъде статично, относително, абсолютно или фиксирано, а каква е разликата между тези позиционирания ще разберете през следващите 5 минути. Статичния способ (static) е този, по който елементът ще се покаже в чист HTML без CSS. Относителното позициониране (relative) е почти същото като статичното, с разликата, че елементът може да бъде донагласен чрез "top", "left" и "right" (примерно top: 5px)

Абсолютното позициониране (absolute) издърпва елементът от нормалния ред в HTML и буквално го праща в свой свят. Елементът може да бъде поставен където ви сърце желае, използвайки отново свойствата "top", "left" и "right". Не забравяйте и "float", изключително полезен е при уебстраниците с повече от един панел.

Фиксираното позициониране (fixed) е подобно на абсолютното, но то ще позиционира елементът точно спрямо прозореца на браузъра, тоест елементът трябва да скролира заедно със прозореца, а не да седи точно. Но това е само теоритично. Проблемът (отново) е в IE 6, който не поддържа свойството fixed.

Пример за позициониране с top / left"0":

*забележете, че при нулева стойност не се пише "px"*

#element {

	position: absolute;

	top: 0;

	left: 0;

	width: 200px;

}
Пример за позициониране с top / left"5px": *вече при стойност 1 и нагоре си пишем px при top/left/right*
#element {

	position: absolute;

	top: 5px;

	left: 5px;

	width: 200px;

}




1 Коментар


Регистрирайте се или влезете в профила си за да коментирате

Трябва да имате регистрация за да може да коментирате това

Регистрирайте се

Създайте нова регистрация в нашия форум. Лесно е!


Нова регистрация

Вход

Имате регистрация? Влезте от тук.


Вход