Позиционирование CSS

Свойство position имеет следующие значения
static relative absolute fixed
Только совместно с ним применяются свойства (искл. position: static;)
top bottom right left z-index
Одновременно могут присутствовать
margin transform float (искл. position: absolute; и position: fixed;)

<style type="text/css">
.primer {
  border: 4px solid #456;
  width: 200px;
  background: #fff;  position: fixed;  position: static;  position: relative;  position: absolute;  margin: 15px -15px -15px 15px;  -moz-transform: translate(15px, 15px); -webkit-transform: translate(15px, 15px); -o-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px);  z-index: 100;  float: left;  top: 15px;  bottom: 15px;  right: 15px;  left: 15px;}
</style>

<div class="primer"></div>

<style type="text/css">
.primer1 {
  border: 4px solid #087e11;
  width: 200px;
  background: #e1e1e1;  z-index: 200; position: relative;
}
</style>

<div class="primer1"></div>

Добавить пустой тег перед div с class="primer" - жмём.

Введение

Элементы на веб-странице занимают определённое пространство. По аналогии с корабликами в игре "Морской бой". Между кораблями должны быть пустые клеточки - margin.

Для того, чтобы один элемент поместить поверх другого, нужно задать отрицательное значение для margin. Но тогда содержимое тегов будет накладываться друг на друга. С помощью свойств position и transform они как бы приподнимаются на уровень 2.

В естественном порядке нижние теги в коде показаны над верхними. Благодаря z-index на уровне 2 можно самим определить видимый элемент.

Статического позиционирование - position: static;

position: static используется по умолчанию и отменяет действие relative, absolute и fixed. Значения свойств top, bottom, right, left игнорируются. При отсутствии transform не учитывается и z-index.

<style type="text/css">
  .temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; z-index: 3; }
  .svetlyi2 { background-color: #fff; width: 250px; z-index: 2; margin: 0px -30px -30px 30px; }
  .svetlyi3 { background-color: #f5f5dc; width: 250px; z-index: 1; }
</style>

<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>

Относительное позиционирование - position: relative;

Тому блоку, которому мы присвоим position: relative будет отдан приоритет. Содержимое нижнего элемента скрывается.

<style type="text/css">
  .temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative;}
  .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; }
  .svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>

<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>

Для того, чтобы расположить блок Б поверх В, но ниже А, недостаточно присвоить и ему position: relative, поскольку в коде он стоит ниже блока А, а значит будет его перекрывать.

<style type="text/css">
  .temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; }
  .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; }
  .svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>

<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>

Нужно задать для элемента Б ещё и z-index меньше, чем у блока А.

<style type="text/css">
  .temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; z-index: 2; }
  .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1; }
  .svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>

<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>

Вместо margin при относительном позиционировании иногда лучше использовать свойства top, bottom, right, left. Точкой отсчёта для них является исходное положение элемента. При этом блок Б продолжает располагаться так, словно блок А находится на прежнем месте - он оставляет для него пустое пространство. Поэтому можно не колдовать с пустым div (подробнее).

<style type="text/css">
  .temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; top: 30px; left: 60px; position: relative; z-index: 2; }
  .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1; }
  .svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>

<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>

Полная аналогия со свойством transform:translate css

<style type="text/css">
  .temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; transform: translate(60px, 30px); z-index: 2; }
  .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: relative; z-index: 1; }
  .svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>

<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>

Для встроенных элементов

Встроенные элементы margin не смещает вниз и вверх (подробнее). Только top, bottom

<style type="text/css">
  .temnyi { background-color: #666; width:500px; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; top: 30px; position: relative; }
  .svetlyi2 { background-color: #fff; width: 250px; }
</style>

<div class="temnyi">
  <span class="svetlyi2">Б</span><span class="svetlyi1">А</span><span class="svetlyi2">Б</span>
</div>

или

<style type="text/css">
  .temnyi { background-color: #666; width:500px; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; transform: translate(0px, 30px); }
  .svetlyi2 { background-color: #fff; width: 250px; }
</style>

<div class="temnyi">
  <span class="svetlyi2">Б</span><span class="svetlyi1">А</span><span class="svetlyi2">Б</span>
</div>

БАБ

Абсолютное и фиксированное позиционирование

Уже были подробно рассмотрены: position: absolute; и position: fixed;

Казалось бы, что блок с position: absolute должен находиться выше position: relative, но это нет так, тут действует естественный порядок. А значит z-index позволит между ними выбрать приоритетный элемент.

<style type="text/css">
  .temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; }
  .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: absolute; }
  .svetlyi3 { background-color: #f5f5dc; width: 250px; }
</style>

<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>

Блок В игнорирует исходное положение блока Б, поскольку при position: absolute и position: fixed элемент перестаёт влиять на соседние теги ни посредством своей ширины/высоты, ни посредством float: left.

<style type="text/css">
  .temnyi { background-color: #666; width:500px; text-align: center; font-size: 250%;}
  .svetlyi1 { background-color: #ccc; width: 250px; margin: 0px -60px -30px 60px; position: relative; z-index: 2; }
  .svetlyi2 { background-color: #fff; width: 250px; margin: 0px -30px -30px 30px; position: absolute; z-index: 1; }
  .svetlyi3 { background-color: #f5f5dc; width: 250px; margin-top: 20px;}
</style>

<div class="temnyi">
<div class="svetlyi1">А</div>
<div class="svetlyi2">Б</div>
<div class="svetlyi3">В</div>
</div>

Итоговая таблица

отличительные свойства	position: static;	position: relative; transform: translate();	position: absolute;	position: fixed;
наложение	элементы лучше не помещать друг на друга	элементы имеет приоритет видимости над static. Другие значения равнозначны. Видимым будет тот, кто ниже находится в коде, либо обладает большим значением z-index
точка отсчёта top, right, bottom и left	игнорируются	исходное положение элемента	край родительского элемента	край окна браузера
элементы вокруг	учитывают текущее положение элемента	учитывают исходное положение элемента	игнорируют положение элемента
width: 100%; это ширина	элемента (для встроенного)/родительского элемента (для блочного)		родительского элемента с position не в значении static	окна браузера
при прокрутки страницы элемент	перемещается			"прилипает" к заданному месту окна браузера

А теперь для закрепления материала пощёлкайте по кнопкам в начале статьи, подумайте почему произошли именно такие изменения.

Нижние в коде блоки показаны над верхними блоками, но не перекрывают их. [w3.org]

navy

blue

DodgerBlue


<div class="raz">
  <div>navy</div>
  <div>blue</div>
  <div>DodgerBlue</div>
</div>

inline-элементы находятся над блочными элементами. И если в коде они ниже, то перекрывает блоки.

navy

blue

DodgerBlue


<div class="dva">
  <div>navy</div>
  <div>blue</div>
  <div>DodgerBlue</div>
</div>

Плавающие элементы находятся над нижестоящими элементами (искл. inline-элементы).

navy

blue

DodgerBlue


<div class="tri">
  <div>navy</div>
  <div>blue</div>
  <div>DodgerBlue</div>
</div>

наверх ↑

11 комментариев:

Анонимный: +1)
Анонимный: +1
thanks: Ogromnoe spasibo!!!
NMitra: Пожалуйста!
Анонимный: +1
NMitra: Спасибо :)
Анна Сычева: Спасибо огромное! благодаря примерам с кнопками вверху - просто фантастикаааа!
NMitra: Анна, благодарю за комментарий, за подсказку в каком направлении писать статьи!
YagoBiceps: Спасибо!
Анонимный: Добавить пустой тег перед div с class="primer" - жмём. (на верху, под первой картинкой). Куда добавить, если ничего не вставляется? Жмем - не открывается... Ничего не понятно.
NMitra: А я уже не помню для чего это сделала