Как элемент позиционируется в документе

Свойство position указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный, фиксированный или липкий).

позиция: статическая

  • Элементы HTML позиционируются статично по умолчанию.
  • Элемент не позиционируется каким-либо особым образом, он всегда позиционируется в соответствии с нормальным потоком страницы.

Примечание. Свойства top, left, right, bottom и z-index не действуют.

Зачем это нужно? - Единственная причина, по которой вы когда-либо устанавливали элемент в position: static;, - это принудительно удалить некоторое позиционирование, которое было применено к элементу, находящемуся вне вашего контроля.

<div class="parent">
  <div class="child">
  </div>
</div>
<div class="sibling"></div>
.parent {
  width: 200px;
  height: 200px;
  background-color:green;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
}
.sibling {
  width: 100px;
  height: 100px;
  background-color: blue;
}

положение: относительное

  • Расположен относительно своего нормального положения.
  • Другой контент не будет адаптирован для размещения в любом зазоре, оставленном элементом, то есть без изменения макета вокруг него (сохраняйте естественный поток страницы).

Примечание. Установка свойств top, right, bottom и left для относительно позиционированного элемента приведет к тому, что он будет отрегулирован от своего нормального положения.

Зачем это нужно? - Во-первых, он вводит возможность использовать z-index для этого элемента, что на самом деле не работает со статически позиционированными элементами. Затем любой дочерний элемент относительно позиционированного элемента может быть абсолютно позиционирован внутри этого блока, т.е. дочерние элементы перемещаются вместе с родителем.

<div class="parent">
  <div class="child">
  </div>
</div>
<div class="sibling"></div>
.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color:green;
  z-index: 5;
  left: 25px;
  top: 25px;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
}
.sibling {
  width: 100px;
  height: 100px;
  background-color: blue;
}

позиция: абсолютная

  • Позиционируется относительно к ближайшему предку. (Позиция родителя)
  • Позиционированный элемент - это элемент, положение которого равно любому, кроме статического. Если элемент с абсолютным позиционированием не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы.
  • Другие элементы заполнят недостающее место, т. Е. Изменят макет вокруг него (не сохранит естественный ход страницы).

Примечание. Компромисс (и самое важное, о чем следует помнить) при абсолютном позиционировании заключается в том, что эти элементы удаляются из потока элементов на странице. На элемент с таким типом позиционирования не влияют другие элементы и другие элементы.

<div class="parent-1">        
  <div class="child-1">
  </div>
</div>
<div class="parent-2">
  <div class="child-2">
  </div>
</div>
<div class="parent-3">
  <div class="child-3">
  </div>
</div>
.parent-1 {
  position:relative;
  width: 200px;
  height: 200px;
  background-color:green;
}
.parent-2 {
  width: 200px;
  height: 200px;
  background-color:pink;
}
.parent-3{
  position: absolute;
  top: 20px;
  left: 300px;
  width: 200px;
  height: 200px;
  background-color:orange;
}
.child-1{
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: absolute; //parent - relative:move according to parent1
  right: 5px;
  bottom: 5px;
}
.child-2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position:absolute; //parent - static: move according to body
  left: 3px;
  top: 20px;
}
.child-3{
  width: 100px;
  height: 100px;
  background-color: black;
  position:absolute; //parent - absolute: move according to parent3
  left: 3px;
  top: 20px;
}

позиция: фиксированная

  • Расположен относительно области просмотра.
  • Всегда остается на той же странице, даже если страница прокручивается. Фиксированный элемент не оставляет зазора на странице, где он обычно располагался бы.
  • Остальные элементы заполнят недостающее место (не сохраняют естественное оформление страницы)

<div class="parent-1">
  <div class="child-1">
  </div>
</div>
.parent-1 {
  position:relative;
  width: 200px;
  height: 200px;
  background-color:green;
}
.child-1{
  width: 100px;
  height: 100px;
  background-color:yellow
  position: fixed;
  right: 5px;
  bottom: 5px;
}

позиция: липкая

  • Позиционируется на основе положения прокрутки пользователя.
  • Переключение между относительным и фиксированным в зависимости от положения прокрутки. Позиционируется относительно до тех пор, пока в области просмотра не встретится заданная позиция смещения - затем она остается на месте - как position: fixed.

Примечание. Internet Explorer не поддерживает фиксированное позиционирование. Safari требует префикса - webkit -. Вы также должны указать хотя бы один из top, right, bottom или left, чтобы закрепленное позиционирование работало.

<div class="parent">
  <div class="child">
  </div>
</div>
.parent {
  position: relative;
  width: 200px;
  height: 400px;
  background-color:green;
  z-index: 5;
  left: 25px;
  top: 25px;
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  position:sticky;
  top: 10px;
}
//page scrolls - whenever top reaches 10px, child div will get fixed.

Мы тщательно рассмотрели все пять позиций CSS с примерами. Надеюсь, вы нашли это полезным. Спасибо за чтение! :)

Больше контента на codecrunch.org