Как работает CSS позиционирование

3-08-2010

Конечно позиционирование является одним из самых полезных инструментов дизайнеров. Однако существует несколько понятий в позиционировании которые могут помешать начинающим в его освоении.

Что такое позиционирование

Когда браузер открывает вашу страницу, он начинает читать элементы (дивы, параграфы, заголовки и т.д.) в порядке появления в HTML разметке страницы. Позиционирование это естественный способ организации отображения элементов. Существует четыре типа позиционирования: static, relative, absolute и fixed.

По умолчанию все элементы имеют позиционирование static

Все элементы по умолчанию имеют статическим позицию. Статическое позиционирование означает, что каждый элемент расположен в естественном порядке.

Относительное позиционирование (relative)

Применение относительного позиционирования само по себе не имеет какой либо заметной разницы в том как элементы отображаются на странице. Но теперь вы можете переместить элемент с его нормального положения использую такие CSS свойства как: top, left, bottom и right.

.relativeDiv{
	/*
		Сдвигаем div наверх и влево
		с его нормального места:
	 */
	position:relative;
	top:-50px;
	left:-100px;
}

Блог о Drupal

Фиксированное позиционирование (fixed)

Добавляя position:fixed в CSS стили элемента, он принимает позицию относительно окна браузера, то есть при прокрутке страницы элемент будет стоять на фиксированной позиции. Это позволяет показывать панели инструментов, панели навигации которые будут расположены на фиксированных местах при прокрутке страницы.

.fixedDiv{
	/*
		Фиксируем div снизу в 20px
		от окна браузера:
	 */
	position:fixed;
	right:20px;
	bottom:20px;
}
Единственным недостатком этого позиционирования является то что оно не поддерживается старыми браузерами такими как IE6.

Абсолютное позиционирование (absolute)

Абсолютно позиционированный элемент отображается на относительно документа, или родительского элемента с позиционированием отличным от статического. Вы сможете применять к элементу top, left, bottom и right CSS свойства для для более точного позиционирования. Это позволяет центрировать дивы горизонтально и вертикально.
.parentDiv{
	/*
		Располагаем div в 50px справа и в 90px 
		сверху от родительского элемента
	 */
	position:absolute;
	right:50px;
	top:90px;
}

Используя эти свойства позиционирования вы сможете создать страницы любого типа. Также использую такое CSS свойство как z-index вы сможете менять параметры наложения элементов.