8

Вопрос банальный, но надеюсь простите новичку;)

Теорию и значение свойств position (в вопросе интересует только мнение об absolute и relative) и отступов я конечно знаю, но дабы впоследствии не наступать на грабли и избежать возникновения недопониманий объясните, пожалуйста, в каких случаях какой способ позиционирования

  1. абсолютное
  2. относительное
  3. margin,padding

предпочтительнее использовать. Я конечно понимаю, что теоретически можно сайт и на only absolute'е сверстать но я хотел бы услышать примеры, где определенное свойство было бы более уместно (или даже незаменимо) относительно других.

Заранее спасибо за помощь начинающему верстальщику;)

3 ответа 3

4

Позиционирование отделяет элемент от общей картины и позволяет сдвигать его по всем векторам: x, y и z. Можно представить, что позиционированный элемент отрывается и подлетает над плоскостью (которой является страница), ну как летающий юнит в Warcraft 3, например, и затем его можно смещать в любую сторону, указывая координаты свойствами left и right, а также z-index.

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

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

Маргин же просто двигает элемент в определённую сторону, тоесть меняет его фактическое местоположение.

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

P.S. Только написав всё это вспомнил, что ТСу нужны были примеры использования, а не объяснения что к чему, но такой талмуд удалять жалко. Только не кидайте камнями, считайте я просто релаксируя написать что-то по теме захотел.

2
  • Ничего со всеми бывает лови плюсик;)
    – midia
    27 июл 2018 в 16:00
  • @midia вот добрый ты человек, даже плюса не пожалел, спасибо)
    – Diskyp
    27 июл 2018 в 16:07
2
+100

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

Основная разница применения этих способов позиционирования в том, как они взаимодействуют с другими элементами и относительно чего позиционируются — это даёт основное понимание, где какой способ применить.


absolute

Может использоваться для попапов, плавающих декоративных элементов, контролов (например, выпадающего меню).

Такой способ позиционирования вынимает элемент из контекста, соответственно, его можно использовать, когда другие элементы никак не завязаны на абсолютно позиционируемый элемент. Также top и left этого элемента

Также absolute удобно использовать для вертикального и/или горизонтального центрирования блока в блоке. При этом нужно учитывать, что внешний блок может уменьшиться и центрированный блок уже не влезет:

.wrapper {
  width: 100vw;
  height: 100vh;
  background: #ccc;
}

.inner {
  background: #000;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="wrapper">
  <div class="inner"></div>
</div>


relative

Способ позиционируется относительно других элементов, вынимает его из контекста, но не двигает другие элементы. Его удобно использовать, когда нужно подвинуть какой-то элемент и не "зацепить" находящиеся рядом.

Также его удобно использовать для выносных элементов — степени, индексы в химических формулах, т. к. он ведёт себя более предсказуемо, чем vertical-align.

.jump {
  position: relative;
  top: -10px;
}

span {
  position: relative;
  top: 10px;
}
<p>The quick brown fox jumps over the lazy dog</p>
<p class="jump">The quick brown fox <span>jumps</span> over the lazy dog</p>
<p>The quick brown fox jumps over the lazy dog</p>

Важно помнить, relative задаёт, условно, нулевую точку для абсолютно позиционированных элементов, которые находятся внутри него.

Также relative удобно использовать в таких случаях (не смог вспомнить ни одного примера из реальной жизни, но точно помню что применял такой подход):

span {
  position: relative;
  z-index: 100;
}

.text {
  position: relative;
}

.over {
  width: 500px;
  height: 100px;
  top: 0;
  left: 10%;
  background: red;
  position: absolute;
}
<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tellus dui, accumsan sed odio in, dictum ornare risus. Donec viverra ipsum vitae nisi ornare vehicula. Proin tempus et ipsum eu porta. Duis vitae luctus mi, sit amet aliquet mauris. Nulla <span>facilisi</span>. Sed suscipit nunc ac augue volutpat congue. Donec sollicitudin venenatis est sed feugiat. Vestibulum at risus metus.

  <div class="over"></div>
</div>


margin

Margin не вынимает элемент из контекста и при изменении положения влияет на другие элементы.

Основное использование в качестве позиционирования — это margin с отрицательными значениями.

Это можно использовать, например, для того чтобы "подтянуть" блок на странице повыше к другому блоку, если у него задан слишком большой отступ снизу (это не совсем хорошо, но иногда другого выхода нет), при этом остальные элементы, находящиеся ниже, также подтянутся выше:

.relative-jump {
  position: relative;
  top: -10px;
}

.margin-jump {
  margin-top: -10px;
}
<p>The quick brown fox jumps over the lazy dog</p>
<p class="relative-jump">The quick brown fox jumps over the lazy dog</p>
<p>The quick brown fox jumps over the lazy dog</p>

<p>The quick brown fox jumps over the lazy dog</p>
<p class="margin-jump">The quick brown fox jumps over the lazy dog</p>
<p>The quick brown fox jumps over the lazy dog</p>

Отрицательный margin часто использовался для задания порядка колонок (без изменения html) в мультиколоночных дизайнах.

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

Ещё одно применение — это горизонтальное центрирование блока внутри другого блока с использованием margin: 0 auto (эдакий text-align: center для блочных элементов):

.wrapper {
  background: #ccc;
  height: 200px;
}

.inner {
  margin: 0 auto;
  width: 100px;
  background: #000;
  color: #fff;
}
<div class="wrapper">
  <div class="inner">inner text</div>
</div>


padding

Padding я бы не рассматривал как способ позиционирования: он применяется для отступов с разных сторон. Важно помнить что это внутренний отступ до border.

Единственный приём относительно позиционирования который бы я привёл — это отступы элемента + box-sizing:

.wrapper {
  padding: 20px;
  box-sizing: border-box;
}
<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar, arcu sit amet fringilla iaculis, augue ipsum vulputate augue, posuere mattis sem massa et urna. Mauris aliquam quam id mollis tempus. Donec eu tempus quam. Donec tincidunt imperdiet purus, quis aliquet massa convallis sit amet. Maecenas sollicitudin tempor justo nec cursus. Proin luctus sapien a lobortis suscipit. Nulla vitae tristique velit. Etiam luctus leo sit amet rutrum pellentesque.</p>
</div>

Этот приём удобно использовать чтобы задать отступы элементам внутри блока, при этом не меняя их css, то есть внутри этого блока может оказаться что угодно и оно будет с едиными правильными отступами от краёв блока.

-1

Как можете видеть, ниже 2 картинки и одна находится под другой Это не сверстаешь без позиционирования одними margin'ами и padding'ами

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

.about-us {
  background-color: #000;
  min-width: 1200px;
  min-height: 600px;
}

.about-us .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1200px;
  margin: 0 auto;
}

.about-us__images {
  position: relative;
}

.about-us__images img:first-child {
  position: absolute;
  top: 175px;
  z-index: 5;
  width: 302px;
}

.about-us__images img:last-child {
  margin-left: 65px;
  z-index: 2;
  width: 419px;
}

.about-us__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-left: 152px;
}

.about-us__theme {
  color: #95a7ff;
  font-family: "Fightspirit";
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.about-us__paragraph {
  margin-top: 35px;
  color: #ffffff;
  font-family: "Fightspirit";
  font-size: 50px;
  font-weight: 400;
  line-height: 30px;
}

.about-us__article {
  margin-top: 63px;
  color: #ffffff;
  font-family: Montserrat;
  font-size: 13px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.35px;
}
<main class="about-us">
  <div class="wrapper">
    <article class="about-us__images">
      <img src="https://i.imgur.com/B0K8Y2c.jpg" alt="Graffiti - Love Share" height="201" width="302">
      <img src="https://i.imgur.com/2DVxPLy.jpg" alt="Graffiti - Moro" height="279" width="409">
    </article>
    <article class="about-us__text">
      <span class="about-us__theme">About us</span>
      <span class="about-us__paragraph">Lorem Ipsum</span>
      <span class="about-us__article">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sollicitudin aliquam suscipit. Vestibulum ligula dolor, vehicula ac metus lobortis, lobortis maximus mauris</span>
    </article>
  </div>
</main>

2
  • 2
    Не вижу ответа на вопрос... К чему сей пример? Как именно он отвечает на вопрос?
    – Air
    27 июл 2018 в 6:48
  • В каких случаях какой способ позиционирования
    – Netahaki
    27 июл 2018 в 6:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.