Войти
» » » Позиционирование блоков

Позиционирование блоков

Позиционирование блоков

Возможности CSS благодаря абсолютному и относительному позиционированию располагать блоки, заголовки, картинки и всё относящееся к блокам в любом месте экрана или сайта, что позволяет создавать действительно удобные для пользователей сайты.

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

POSITION:ABSOLUTE

Наиболее распространённый тип позиционирования, позволяет расположить блок по необходимым координатам, которые отсчитываются от краёв экрана, необходимо использовать ключевые слова: top, right, bottom, left и координаты.

Пример:

.block1{position:absolute; top:100px; right:100px; }- блок будет всегда располагаться в верхнем правом углу монитора или сайта с отступом сверху в 100 пикселей и отступом справа в 100 пикселей.

.block2{position:absolute;}- блок будет всегда располагаться в верхнем левом углу монитора, без отступов (прижимаясь к концам экрана).

Обычно указываются только две координаты, т.е. привязка идет к любому из углов документа.

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

POSITION:RELATIVE

При использовании относительного позиционирования блок будет смещаться, но его первоначальное место ни чем не заполняется. А координаты начинают отсчитываться от его первоначального расположения.

Пример:
.block{ border:1px solid red; position:relative; top:200px; left:100px;}