CSS свойство position

Свойство position определяет положение элемента в документе.

Свойство имеет следующие значение:

static
fixed
absolute
relative
sticky

Типы позиционирования:

Позиционированные элементы: элемент позиционирован, и его положение на странице определяется свойствами offset: top, right, bottom и left. Свойства offset не работают на статических элементах.

Относительно позиционированные элемента: значение - "relative". Свойства top и bottom определяют вертикальное смещение элемента от его текущего положения, а свойства left и right определяют горизонтальное смещение.

Абсолютно позиционированные элементы: значение - "absolute" или "fixed". Свойства top, right, bottom и left определяют смещения от краев содержащего блок элемента.

Элементы с липким позиционированием: значение "sticky". Они представлены как смесь элементов "relative" и "fixed".

Значение по умолчанию	static
Применяется	Ко всем элементам.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS2
DOM синтаксис	Object.style.position = "sticky";

Синтаксис

position: static | absolute | fixed | relative | sticky | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      position: absolute;
      left: 40px;
      top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства position</h2>
    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. </p>
  </body>
</html>

Попробуйте сами!

Пример со всеми значениями:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box1 {
      position: static;
      border: 2px solid #666;
      width: 300px;
      height: 100px;
      }
      #box2 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box3 {
      position: relative;
      border: 2px solid #666;
      width: 300px;
      height: 100px;
      }
      #box4 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box5 {
      position: absolute;
      border: 2px solid #666;
      width:320px;
      height: 100px;
      top: 750px;
      right: 25px;
      }
      #box6 {
      position: absolute;
      border: 2px solid #8ebf42;
      top: 70px;
      right: 15px;
      }
      #box7 {
      position: fixed;
      border: 2px solid #8ebf42;
      background-color: #eee;  
      width: 300px;
      height: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      }
      #box8 {
      position: absolute;
      border: 2px solid #666;
      top: 70px;
      right: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства position</h2>
    <h3>Position: static</h3>
    <p>Элемент Box1 остается в нормальном потоке страницы и не является опорной точкой для абсолютно позиционированного элемента Box2:</p>
    <div id="box1">
      Box1: position: static.
      <div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: relative</h3>
    <p>Элемент Box3 остается в нормальном потоке страницы, а также действует как опорная точка для абсолютно позиционированного элемента Box4:</p>
    <div id="box3">
      Box3: position: relative.
      <div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: absolute</h3>
    <p>Элемент Box5 не остается в нормальном потоке страницы.
      Он позиционируется в соответствии с ближайшим позиционированным родительским элементом и также действует как опорная точка для абсолютно позиционированного элемента Box6:
    </p>
    <div id="box5">
      Box5: position: absolute, top: 750px, right: 15px.
      <div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: fixed</h3>
    <p>Элемент Box7 не остается в нормальном потоке страницы и позиционируется в соответствии с окном просмотра. Он также действует как опорная точка для абсолютно позиционированного элемента Box8:</p>
    <div id="box7">
      Box7: position: fixed, bottom: 0, left: 0, right: 0.
      <div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
    </div>
  </body>
</html>

Попробуйте сами!

В вышеприведенном примере использованы все значения свойства position.

Значения

Value	Description
static	Элемент документа находится в нормальном потоке. Значение по умолчанию.
absolute	Элемент удаляется из нормального потока документа и позиционируется относительно его позиционированного родительского элемента.
fixed	Элемент удаляется из нормального потока документа и позиционируется относительно окна браузера.
relative	Элемент расположен относительно его текущего положения.
sticky	Элемент документа находится в нормальном потоке документа, а затем смещается относительно его ближайшего прокручиваемого родительского элемента и содержащего блока.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.