Доброго времени суток, дорогой читатель! Рад снова Вас приветствовать на своем сайте. Сегодня я хочу поделиться с опытом в часто встречающемся явлении при верстке сайта — позиционирование блоков на странице. Чтобы их как-то располагать нам понадобится свойство CSS - position.

Давайте создадим простой пример HTML страницы с CSS стилем и уже на нем рассмотрим варианты расположения:

<html lang="ru">
<head>
<style type="text/css">
.div1{
background-color: red;
width: 300px;
height: 300px;
}
.div2{
background-color: blue
width: 100px;
height: 100px;
}
.div3{
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

Получим вот такую картину:

Теперь я хотел бы расположить синий и зеленый блок поверх красного, здесь я использую свойство CSS - position:

.div1{
background-color: red;
width: 300px;
height: 300px;
position: absolute;
}
.div2{
background-color: blue;
height: 100px;
width: 100px;
position: absolute;
top: 200px;
}
.div3{
background-color: green;
height: 100px;
width: 100px;
position: relative;
}

Обновив страницу, мы увидим зеленый блок поверх всех (синий не потерялся, он под зеленым блоком). Если Вы не заметили, то я использовал для синего и зеленого блока разное позиционирование. Это было не случайно, так как они по-разному ведут себя:

  • absolute — элемент позиционирован относительно края окна браузера;
  • relative — элемент устанавливается относительно его начального места.

Значения свойства position

Значение Описание
absolute Указывает, что элемент абсолютно позиционирован. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
fixed Похож на absolute, но в отличие от него привязывается к указанной точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
relative Положение элемента устанавливается относительно его начального места. Применение атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static Элементы отображаются как обычно.
inherit Значение должно быть унаследовано от элемента родителя

Оба свойства имеют атрибуты: left, top, right и bottom, при помощи которых можно индивидуально расположить любой блок. Давайте подключим их:

.div1{
background-color: red;
width: 300px;
height: 300px;
position: absolute;
}
.div2{
background-color: blue;
height: 100px;
width: 100px;
position: absolute;
top: 200px;
}
.div3{
background-color: green;
height: 100px;
width: 100px;
position: relative;
left: 100px;
}

Вот что должно получится:

В итоге у нас получилась неплохая основа для хорошей страницы. Желаю удачи и до новых встреч!

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.