Способы позиционирования и их разумное применение

#html #css

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

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


абсолютное
относительное
margin,padding


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

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

Ответы

Ответ 1

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

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



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%);
}

  








relative

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

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



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

span {
  position: relative;
  top: 10px;
}
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog




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

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



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

.text {
  position: relative;
}

.over {
  width: 500px;
  height: 100px;
  top: 0;
  left: 10%;
  background: red;
  position: absolute;
}

  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 facilisi.
Sed suscipit nunc ac augue volutpat congue. Donec sollicitudin venenatis est sed feugiat.
Vestibulum at risus metus.

  








margin

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

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

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



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

.margin-jump {
  margin-top: -10px;
}
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog




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

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

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



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

.inner {
  margin: 0 auto;
  width: 100px;
  background: #000;
  color: #fff;
}

  
inner text







padding

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

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



.wrapper {
  padding: 20px;
  box-sizing: border-box;
}

  
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.





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


Ответ 2

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

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

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

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

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

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


Ответ 3

Как можете видеть, ниже 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;
}

  

    

      
      
    
    

      About us
      Lorem Ipsum
      Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Curabitur sollicitudin aliquam suscipit. Vestibulum ligula dolor, vehicula ac
metus lobortis, lobortis maximus mauris