Разница между style = "position: absolute" и style = "position: относительный" - PullRequest
Новая
       18

Разница между style = "position: absolute" и style = "position: относительный"

96 голосов
/ 16 декабря 2010

Может ли кто-нибудь сказать мне разницу между style = "position:absolute" и style = "position:relative" и как они отличаются в случае, если я добавлю его к div / span / input элементам?

Я используюabsolute прямо сейчас, но я также хочу изучить relative.Как это изменит положение?

Ответы [ 9 ]

166 голосов
/ 16 декабря 2010

Абсолютное позиционирование означает, что элемент полностью выведен из нормального потока макета страницы.Что касается остальных элементов на странице, то абсолютно позиционированный элемент просто не существует.Затем сам элемент рисуется отдельно, вроде «сверху» от всего остального, в позиции, которую вы указываете с помощью атрибутов left, right, top and bottom.

Используя позицию, указанную с помощью этих атрибутов, элемент затем помещается в эту позицию в его последнем элементе-предке, который имеет атрибут позиции, отличный от static (элементы страницы по умолчанию имеют статическое значение, когда атрибут позиции отсутствует) или тело документа (область просмотра браузера), если такого предка не существует.

Например, если бы у меня был этот код: 

<body>
  <div style="position:absolute; left: 20px; top: 20px;"></div>
</body>

... <div> будетрасположен в 20px от верхней части окна просмотра браузера и 20px от левого края того же.

Однако, если бы я сделал что-то вроде этого: 

 <div id="outer" style="position:relative">
   <div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
 </div>

... тогда inner div будет располагаться в 20px от верха outer div и в 20px от левого края того же, потому что outer div не позиционируется с position:static, потому что мы явно настроили его на использование position:relative.

Относительное позиционирование, с другой стороны, похоже на указание отсутствия позиционирования вообще, но атрибуты left, right, top and bottom "выталкивают" элемент из их нормального расположения.Остальные элементы на странице по-прежнему располагаются так, как если бы элемент находился в своем обычном месте.

Например, если бы у меня был этот код: 

<span>Span1</span>
<span>Span2</span>
<span>Span3</span>

...тогда все три <span> элемента будут располагаться рядом друг с другом, не перекрывая друг друга.

Если я установлю второй <span> для использования относительного позиционирования, например: 

<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>

...тогда Span2 будет перекрывать правую сторону Span1 на 5px.Span1 и Span3 будут сидеть точно в том же месте, что и в первом примере, оставляя зазор в 5 пикселей между правой стороной Span2 и левой стороной Span3.

Надеюсь, что это немного прояснит ситуацию.

30 голосов
/ 10 марта 2017

Относительное позиционирование: Элемент создает свои собственные оси координат со смещением от оси координат области просмотра.Это часть потока документов, но смещена.

Абсолютное позиционирование: Элемент ищет ближайшие доступные координатные оси среди своих родительских элементов.Затем элемент позиционируется путем указания смещений от этой координатной оси.Из документа удален нормальный поток.

enter image description here

Источник

14 голосов
/ 16 декабря 2010

Вы определенно захотите проверить эту статью позиционирования из A List Apart. Помог в демистификации позиционирования CSS (что до этой статьи показалось мне безумным).

6 голосов
/ 10 июля 2014

С помощью позиционирования CSS вы можете разместить элемент именно там, где вы хотите, на своей странице.

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

Оба Postion имеют разные функции. В Css После установки Position вы можете использовать атрибуты top, right, bottom, left.

Абсолютная позиция

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

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

Относительно позиционированный элемент позиционируется относительно его нормальной позиции.

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

Подробнее: Относительное положение против Абсолюта

5 голосов
/ 12 июня 2017

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

Посмотрите на пример, который я создаю для вас, чтобы показать различия ...

enter image description here

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

.parent {
  display: inline-block;
  width: 180px;
  height: 160px;
  border: 1px solid black;
}

.black {
  position: relative;
  width: 100px;
  height: 30px;
  margin: 5px;
  border: 1px solid black;
}

.red {
  width: 100px;
  height: 30px;
  margin: 5px;
  top: 16px;
  background: red;
  border: 1px solid red;
}

.red-1 {
  position: relative;
}

.red-2 {
  position: absolute;
}
<div class="parent">
  <div class="black">
  </div>
  <div class="red red-1">
  </div>
</div>

<div class="parent">
  <div class="black">
  </div>
  <div class="red red-2">
  </div>
</div>
3 голосов
/ 21 января 2018

Относительно:

  1. Элемент с position: relative; расположен относительно его нормального положения.

  2. Если вы не добавите атрибуты позиционирования (сверху, слева, снизу или справа) к относительному элементу, это никак не повлияет на его позиционирование. Он будет вести себя точно как элемент position: static.

  3. Но если вы добавите какой-либо другой атрибут позиционирования, скажем, top: 10px;, он сместит свою позицию на 10 пикселей ниже, чем обычно.

  4. На элемент с таким типом позиционирования влияют другие элементы, и он сам также влияет на другие.

Абсолют:

  1. Элемент с position: absolute; позволяет вам разместить любой элемент именно там, где вы хотите его видеть. Вы используете атрибуты позиционирования сверху, слева, снизу. и право установить местоположение.

  2. Он размещен относительно ближайшего нестатического предка. Если такого контейнера нет, он помещается относительно самой страницы.

  3. Он удаляется из обычного потока элементов на странице.

  4. На элемент с таким типом позиционирования не влияют другие элементы, а также он не влияет на поток других элементов.

См. Этот очевидный пример для большей ясности. https://codepen.io/nyctophiliac/pen/BJMqjX

3 голосов
/ 16 декабря 2010

Абсолютное позиционирование основано на координатах дисплея: 

position:absolute;
top:0px;
left:0px;

^ помещает элемент в верхнем левом углу окна.


Относительная позиция относительно места размещения элемента: 

position:relative;
top:1px;
left:1px;

^ помещает элемент на 1px вниз и 1px слева от того места, где он изначально находился:)

0 голосов
/ 21 января 2018

position: absolute может быть размещено где угодно и оставаться там, например, 0,0.

position: relative размещается со смещением относительно места, в котором оно изначально размещено в браузере.

0 голосов
/ 16 декабря 2010

Absolute помещает объект (div, span и т. Д.) В абсолютно принудительное местоположение (обычно определяется в пикселях), а относительное помещает его на определенное расстояние от того места, где оно обычно находится.Например:

позиция: относительная;left: -20px;

Может привести к исчезновению левой части текста, если он находится в пределах 20px от левого края экрана.

...