Войти
Регистрация

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

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

Приветствую Вас, дорогие друзья!

Сегодня у меня для Вас тема позиционирования блоков в CSS. Крайне важная тема основ css при создании сайтов.

Представьте HTML-код сайта, Вы там увидите огромный объем блоков и строчных элементов, которые без применения позиционирования будут отображаться на странице в том порядке, в котором они расположены в верстке.

Позиционирование элементов позволяет размещать элементы в том порядке, в котором мы им зададим относительно всего сайта или родительского блока.

За позиционирование в CSS отвечает свойство position, которое принимает несколько значений: relative, absolute, fixed

1. relative

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

Чтобы задать блоку позиционирование не достаточно задать ему только свойство position с одним из трех значений. Необходимо еще управлять блоком с помощью свойств top, right, bottom, left.

Давайте рассмотрим один пример. Создадим на странице блок с классом .parent и внутри него разместим блок с классом .child:

<body>
   <div class="parent">
      <div class="child"></div>
   </div>
</body>

Далее зададим блоку .child позиционирование и передвинем его вниз на 15 пикселей относительно его местоположения:

.child {
   position: relative;
   top: 15px;
}

В первом случае мы не задавали блоку .child позиционирование и он отобразился внутри блока .parent слева сверху. Во втором применили позиционирование, указав top:15px, тем самым сделав сдвиг сверху на 15px от его начального положения внутри блока .parent:

2. absolute

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

Данный тип позиционирования отличается тем, что блок с абсолютным позиционированием выравнивается относительно окна браузера.

Зададим блоку .child абсолютное позиционирование, установим top:0 и left:10px и увидим, как он "прилипнет" к левому верхнему углу страницы и сделает сдвиг влево на 10px, в нашем случае, это тег <body>, а не внутри родительского блока .parent:

.child {
   position: absolute;
   left: 10px;
   top: 0;
}


Однако, если мы зададим родительскому блоку .parent относительное позиционирование, то блок .child уже будет выравниваться относительно него:

.parent {
   position: relative;
}
.child {
   position: absolute;
   left: 10px;
   top: 0;
}


Блок повел себя также, но внутри родительского блока .parent

Остался вопрос зачем это вообще нужно?

Относительное позиционирование (relative) позволяет располагать элемент относительно остальных, что пригодится при адаптивной верстке. Абсолютное позиционирование (absoulte) располагает элемент относительно окна браузера или родительского блока (если он с relative), делая его плавающим, он как бы становится невидимым для остальных элементов и может "бродить" по родителю независимо от положения других элементов, чего нельзя сделать в относительном.

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

3. fixed

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

Данное позиционирование похоже чем-то на предыдущее, но элемент зафиксирован и выравнивается исключительно относительно левого верхнего угла экрана свойствами top, right, bottom, left, не обращая внимания на остальные элементы и при прокрутке сайта блок стоит на месте. Это удобно, если Вы хотите сделать фиксированное верхнее меню сайта и при прокрутке оно стоит на месте.

z-index

Данное свойство задает порядок перекрытия блоков, т.е. все элементы сайта перпендикулярно экрану располагаются слоями друг над другом и перекрывают друг друга, как пирог слоеный, вобщем. Так вот z-index задает положение относительно других элементов. Если одному блоку мы пропишем z-index:1, а другому z-index:2, то второй перекроет первый.

Зачем я это написал? Чтобы при использовании фиксированного позиционирования Вы не забыли задать блоку ему перекрытие, иначе при прокрутке страницы некоторые блоки будут на него залезать.

С позиционированием мы закончили. Попробуйте сделать сами, особенно фиксированное и увидите его в действии.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?