аватар Автор: Сергей Касаткин | 04 марта 2015 19:06

Уроки / CSS /

Урок 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-документа. Главное не запутаться)

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



Похожие статьи


Комментарии к статье (vk.com)