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

Содержание

Существует 4 вида позиционирования

position:

  • static- значение по умолчанию
  • relative
  • absolute
  • fixed

Relative

Давайте рассмотрим, какие есть нюансы в поведении элементов, к которым применяется position:relative.

Представим, что у нас есть три блока, (рис. 1) и средний блок нам необходимо переместить (рис 2).

логика работы position relative

Рисунок №1 — Логика работы position relative

логика работы position relative 2

Рисунок №2 — Логика работы position relative, второй фрагмент

Так вот, если мы переместим средний элемент при помощи position:relative, между 3 и 1 первым элементом останется свободным то место, которое занимал элемент 2, как если бы там были установлены распорки (рис 3).  Часто об этом говорят так: при использовании relative, элементы не схлопываются, если извлекаемый элемент находится между других. Это первый нюанс в использовании этого свойства.

логика работы position relative 3

Рисунок №3 — Логика работы position relative, третий фрагмент

RELATIVE — означает относительно. Следовательно, и позиция элемента, будет  меняться относительно текущей позиции. Для установки параметров позиционирования используются команды top, right, left, bottom. Для удобства вы можете равняться на верхний правый угол позиционируемого элемента (рис 4).

логика работы position relative 4

Рисунок №4 — Логика работы position relative, четвертый фрагмент

Если мы хотим поменять, например, позицию элемента с номером 3, на 50px вниз, тогда необходимо прописать следующее свойство:

top:50px;

Да! Именно top:50px;) Это может показаться неочевидным на первый взгляд. Но если выдохнуть и вдохнуть три раза, становится ясно, что смещение идет просто ОТ  оси, которую мы указываем. Оси изображены на рисунке 5.

логика работы position relative направления смещений

Рисунок №5 — Логика работы position relative направления смещений

Ниже я привожу элементарный пример, который можно вставить в ваш редактор и, немного меняя значения пикселей, увидеть собственными глазами, как происходит перемещение. Также пробуйте заменить top на bottom и т.д. Настоятельно рекомендую это проделать. Обратите внимание, что свойства закомментированы, это сделано для того, чтобы увидеть сначала дефолтное расположение элементов.

Пример в коде

<div id="container">
  <div id="header">
  </div>
  <div id="menu">
  </div>
  <div id ="footer">
  </div>
</div>

#container{
  width:200px;
  height:200px;
  background:#2dda18;
}
#header{
  width:100px;
  height:100px;
  background:#00e0ff;
}
#menu{
  width:40px;
  height:40px;
  background:#f00;
  /*position: relative;
  bottom: 50px;*/
}

Вывод:

  • Данное свойство удобно применять когда нужно как-то переместить элемент относительно его текущей позиции.
  • Смещения происходят ОТ оси, которую вы указываете.
  • Если вырвать из “потока” элемент, то стоящий под ним НЕ будет занимать его место.

Position ABSOLUTE

А что же нам подготовило свойство absolute? По сути элемент, которому установили position:absolute, будет перемещаться тоже относительно, но по отношению к границам окна браузера (рис 6).

логик работы position absolute

Рисунок №6 — Логика работы position absolute

Что, не ясно?)

Тогда давайте разберем это подробнее.  Тут элемент находится как бы внутри чего-то абсолютного, и этот абсолют есть браузер) Шутка, хотя как сказать. На самом деле, все предельно просто. Если, например, установить для элемента с номером 2, который находится внутри элемента с номером 1position absolute, и добавим ему смещение, например, left:100px; тогда элемент сместится так, что его левый край будет отступать ровно на 100px от левого края окна браузера (рис. 7).

логик работы position absolute фрагмент 111

Рисунок №7 — Логика работы position absolute второй фрагмент

А если вам нужно, переместить элемент в нижний левый угол окна браузера, тогда смело добавляйте ему свойство

position: absolute;
right:0px;
bottom:0px;

Вся логика сводится к тому, что:

  1. Параметр top — определяет расстояние ОТ верхней границы окна браузера(или родительского элемента) ДО верхней границы элемента;
  2. Параметр right — ОТ правой границы окна браузера (или родительского элемента) ДО правой границы элемента;
  3. Параметр bottom — ОТ нижней границы окна браузера (или родительского элемента) ДО нижней границы элемента;
  4. Параметр left — ОТ левой границы окна браузера (или родительского элемента) ДО левой границы элемента;

Еще один важный момент!  Поведение элемента в потоке, отличается от relative. Если в прошлом примере с relative мы видели, что при извлечении элемента из потока, между нижним и верхним оставались как бы “распорки”(рис. 3), при absolute, если мы извлечем элемент, стоящий под ним займет его место.

На примере двух следующих изображений все станет полностью понятно. Например, у нас есть родительский блок (зелененький, надеюсь, вы простите мне мои сумасшедшие подборки цветов (рис. 8)), и в нем просто подряд идут 3 дива. Они расположились по умолчанию, друг под другом.

логика работы position absolute третий фрагмент

Рисунок №8 — Логика работы position absolute третий фрагмент

Так вот, если сейчас элементу под номером 2  установить

position: absolute;

и пару параметров, чтобы немного сместить элемент,

left: 45px;
top:100px;

мы получим такую картину (рис 9)

логика работы position absolute четвертый фрагмент

Рисунок №9 — Логика работы position absolute четвертый фрагмент

Ха! Элемент с номером 3 занял место красного блока. Т.е. 1 и 3 схлопнулись. А элемент с номером 2 вышел из потока и теперь словно бы над ними. Но, как показывает практика, позиционировать элемент относительно окна браузера неудобно, так как элемент приобретает непредсказуемое поведение.

Как правило, используется связка. Или комбо), как вам привычнее. Блоку-родителю ставим position:relative, а уже элементу, который нужно позиционировать — position:absolute. Таким образом, элемент будет вести себя также, но осями будут границы родительского блока.

Например, у нас есть те же 3 элемента. И нам нужно элемент с номером 3 поставить в нижний правый угол родительского элемента (рис 10), где элемент с номером 1 и есть родительский, который содержит в себе элемент 2 и 3.

логика работы position absolute

Рисунок №10 — Логика работы position absolute пятый фрагмент

Пример в коде

HTML

<div id="n1">
  <div id="n2">2</div>
  1
  <div id="n3">3</div>
</div>

CSS
#n1{
  position:relative;
  background-color: red;
  width:400px;
  height:400px;
}

#n2{
  height:100px;
  background-color: yellow;
}
#n3{
  position:absolute;
  bottom:0px;
  right:0px;
  background-color: green;
  width:50px;
}

Также настоятельно рекомендую вставить код в редактор и своими руками подвигать элемент. Это закрепит понимание.

Вывод:

  • Absolute, как правило, не применяется сам по себе, а в основном в связке с relative;
  • В качестве осей предстают границы окна браузера;
  • Если извлечь элемент из потока, тогда следующий элемент займет его место;
  • Параметры top, right, bottom, left устанавливают расстояние, ОТ указанной границы окна браузера, ДО одноименной границы элемента.

Position FIXED

Элемент позиционируется по оси главного окна браузера. Элемент фиксируется и не прокручивается при прокрутке экрана. Синтаксис: position:fixed;

Z-index

Пожалуй, тут будет не лишним еще осветить тему — z-index или принцип карточной колоды. Все элементы располагаются по оси X и Y, это вполне очевидно практически для любого человека. Но тут есть еще один момент, а именно “толщина” — перспектива (если проводить параллель с картиной). Это легко понять, если представить колоду карт и те карты, которые находятся за первой, немного выдвинуть, каждую следующую чуть больше предыдущей. Так вот, если смотреть прямо на такую колоду, тогда первая будет к нам ближе, а последующие дальше (рис 11).

логика работы z-index

Рисунок №11 — Логика работы z-index

Таким образом, если нам нужно вручную определить, какой элемент должен быть “ближе” используется z-index.

Логика тут проста, выше тот элемент, у которого индекс выше.

Синтаксис

#n1{
  z-index:значение;
}

На этом я закругляюсь с данной темой. Надеюсь вы нашли те ответы, которые искали.

to be continued…

Автор Виталий Сухомлинов
практикующий Seo-специалист
и программист любитель

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *