Относительное позиционирование

Что такое относительное позиционирование

Элементы с position: relative позиционируются относительно своего обычного положения в потоке документа. Они влияют на позиционирование последующих элементов.

Пример кода

h1 {
  position: relative;
  top: 60px;
  left: 50px;
  border: 2px solid #006;
  padding: 1px;
  background-color: #600;
  color: #eee;
}

#explanation {
  color: #006;
  font-weight: bold;
  font-size: 1.2em;
}

#wrapper {
  width: 600px;
  background-color: #def;
  border: 1px solid #006;
}

Обратите внимание, что текст абзаца сохраняет своё место, даже если h1 был смещён.

Смещение из правого нижнего угла

h1 {
  position: relative;
  bottom: 40px;
  right: 40px;
  border: 2px solid #006;
  padding: 1px;
  background-color: #600;
  color: #eee;
}

Фиксированное позиционирование

Элементы с position: fixed остаются на месте при прокрутке страницы.

Пример кода

#homeLink {
  position: fixed;
  top: 20px;
  left: 0px;
}

Используется, например, для закрепления ссылки "домой" в верхнем левом углу страницы.

← Свойство Display | Иерархия селекторов →