Автор: Никита Иванов | 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?
07 июля 2013 13:18	Урок 2. Селекторы и правила CSS
11 августа 2013 22:25	Урок 5. Выравнивание текста в CSS
13 мая 2014 16:19	Урок 6. Отступы и поля в CSS. Что такое margin и padding?
30 июня 2014 15:53	Урок 8. Как установить цвет текста и фон элемента в CSS?