Автор: Никита Иванов | 04 марта 2015 19:06

Урок 11. Позиционирование в CSS

В CSS есть свойства, которые отвечают за позиционирование элемента. То есть, ему отступы будут заданы от края документа или относительно родительского элемента? Для этого используется свойство position. Оно имеет несколько значений, о них и напишу.

absolute

Данное значение устанавливается для таких элементов, которые должны отображаться так, как будто других на странице и не существует.
Положение зависит от того, есть ли родительские элементы с таким же свойством (position absolute relative fixed):
1. если нет, то положение будет определяться относительно левого верхнего угла окна
2. если есть, то будет положение будет определяться относительно них

fixed

Чёткое фиксированное положение элемента. Его координаты будут привязаны к X,Y сторонам браузера. При скролле страницы элементы будут оставаться на своём месте.

relative

Данное значение определяет положение элемента уже относительно его исходного места.

static

Значение устанавливает элемент так, как он должен располагаться в обычном состояние относительно других элементов.

Располагаем элементы

Установив значения absolute relative fixed элементом возможно манипулировать, перемещая его относительно других элементов. Делается это свойствами top, right, bottom, left. Значения данных свойств устанавливают на сколько сместится элемент относительного текущего положения.

#wrapper {
  position: relative;
  bottom: 15px; /* смещен на 15px от низа */
  left: 30px; /* смещен на 30px слева */
}

При этом можно указывать и отрицательные значения.

#wale {
  position: relative;
  right: -10px; /* смещен на -10px справа (10px слева) */
}

Примеры позиционирования в CSS

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>position</title>
  <style>
   .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 200px; /* Высота блока */
   }
   .layer2 {
    position: absolute; /* Абсолютное позиционирование */
    bottom: 15px; /* Положение от нижнего края */
    right: 15px; /* Положение от правого края */
    line-height: 1px;
   }
  </style>
 </head>
 <body>
  <div class="layer1">
   <div class="layer2">
     <div style="width:250px;height:100px;background-color:#50A5D6"></div>
   </div>
  </div>
 </body>
</html>

Ну и уже по обыкновению смотрим пример проработки) Для наглядности попробуйте изменить размеры окна браузера.

Демонстрация Скачать исходники

С помощью данного свойства можно выстраивать сложную структуру web-документа. Главное не запутаться)

Спасибо за внимание!

30 января 2013 16:49	Урок 1. Как подключить таблицу стилей CSS?
19 мая 2014 17:42	Урок 7. Рамка элемента CSS
02 марта 2015 18:30	Урок 10. Плавающие элементы
30 июля 2013 13:06	Урок 3. Псевдоклассы и псевдоэлементы
07 июля 2013 13:18	Урок 2. Селекторы и правила CSS