Разница между style = «position: absolute» и style = «position: relative»

Question 1

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

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

Question 2

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

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

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

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

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

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

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

... тогда innerdiv будет расположен на расстоянии 20 пикселей от верха outerdiv и 20 пикселей от левого края того же самого, потому что outerdiv не позиционируется, 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 на 5 пикселей. Span1 и Span3 будут располагаться точно на том же месте, что и в первом примере, оставляя зазор 5 пикселей между правой стороной Span2 и левой стороной Span3.

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

Question 3

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

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

Источник

Question 4

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

Question 5

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

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

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

Абсолютное положение

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

Относительное положение

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

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

Подробнее: Относительная позиция против абсолютной

Question 6

Хорошо, здесь очень очевидный ответ ... в основном относительное положение относительно предыдущего элемента или окна, в то время как absolute не заботится о других элементах, если это не родительский элемент, если вы используете top и left ...

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

Также вы можете увидеть это в действии, используя созданный мной 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>

Развернуть фрагмент

Question 7

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

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

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

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

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

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

Question 8

Родственник:

Элемент с position: relative;позиционируется относительно своего нормального положения.
Если вы не добавите атрибуты позиционирования (верхний, левый, нижний или правый) к относительному элементу, это никак не повлияет на его позиционирование. Он будет вести себя точно так же, как position: staticэлемент.
Но если вы добавите какой-нибудь другой атрибут позиционирования, например, top: 10px ;, он сместит свою позицию на 10 пикселей вниз от того места, где обычно находится.
На элемент с таким типом позиционирования влияют другие элементы, и он сам также влияет на другие.

Абсолютный:

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

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

Question 9

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

положение: относительное; слева: -20 пикселей;

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

Question 10

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

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

Question 11

position: relative действуют как родительский элемент position: absolute действуют как дочерние элементы относительной позиции. вы можете увидеть пример ниже

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

Answer 1

103

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

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

css css-position Варун
источник

1

Свойство 'position' в CSS 2.1.

Джош Ли

@rolfl Хм, действительно ли это редактирование было необходимо в вопросе трехлетней давности? Я бы назвал это «слишком мелким».

Mr Lister

3

@MrLister Он попал в очередь на просмотр "предложенного редактирования" .... Я не заметил возраста. Но, если бы это был вопрос 60-секундной давности, разве это имело бы значение?

rolfl

@rolfl Не совсем; Я бы все равно проголосовал «слишком мелкий».

Mr Lister

Answer 2

1

Свойство 'position' в CSS 2.1.

Джош Ли

Answer 3

@rolfl Хм, действительно ли это редактирование было необходимо в вопросе трехлетней давности? Я бы назвал это «слишком мелким».

Mr Lister

Answer 4

3

@MrLister Он попал в очередь на просмотр "предложенного редактирования" .... Я не заметил возраста. Но, если бы это был вопрос 60-секундной давности, разве это имело бы значение?

rolfl

Answer 5

@rolfl Не совсем; Я бы все равно проголосовал «слишком мелкий».

Mr Lister

Answer 6

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

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

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

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

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

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

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

... тогда innerdiv будет расположен на расстоянии 20 пикселей от верха outerdiv и 20 пикселей от левого края того же самого, потому что outerdiv не позиционируется, 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 на 5 пикселей. Span1 и Span3 будут располагаться точно на том же месте, что и в первом примере, оставляя зазор 5 пикселей между правой стороной Span2 и левой стороной Span3.

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

Answer 7

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

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

Источник

Answer 8

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

Answer 9

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

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

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

Абсолютное положение

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

Относительное положение

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

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

Подробнее: Относительная позиция против абсолютной

Answer 10

Хорошо, здесь очень очевидный ответ ... в основном относительное положение относительно предыдущего элемента или окна, в то время как absolute не заботится о других элементах, если это не родительский элемент, если вы используете top и left ...

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

Также вы можете увидеть это в действии, используя созданный мной 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>

Развернуть фрагмент

Answer 11

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

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

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

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

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

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

Answer 12

Родственник:

Элемент с position: relative;позиционируется относительно своего нормального положения.
Если вы не добавите атрибуты позиционирования (верхний, левый, нижний или правый) к относительному элементу, это никак не повлияет на его позиционирование. Он будет вести себя точно так же, как position: staticэлемент.
Но если вы добавите какой-нибудь другой атрибут позиционирования, например, top: 10px ;, он сместит свою позицию на 10 пикселей вниз от того места, где обычно находится.
На элемент с таким типом позиционирования влияют другие элементы, и он сам также влияет на другие.

Абсолютный:

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

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

Answer 13

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

положение: относительное; слева: -20 пикселей;

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

Answer 14

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

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

Answer 15

position: relative действуют как родительский элемент position: absolute действуют как дочерние элементы относительной позиции. вы можете увидеть пример ниже

.postion-element{
   position:relative;
   width:200px;
   height:200px;
   background-color:green;
 }
.absolute-element{
  position:absolute;
  top:10px;
  left:10px;
  background-color:blue;
 }

Разница между style = «position: absolute» и style = «position: relative»

Ответы: