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

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

  • если нет — положение будет определяться относительно левого верхнего угла окна
  • если есть — положение будет определяться относительно существующих элементов

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

relative — определение положения элемента, относительно его исходного расположения

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

Как это выглядит в CSS:

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

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

На этом мы завершили 11 урок!

Комментарии закрыты.