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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

1.0+ 12.0+ 1.0+ 1.0+ 4.0+


Считаете ли это полезным?

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