Різниця між стилем = "позиція: абсолютна" і стиль = "позиція: відносна"

103

Чи може хто-небудь сказати мені різницю між style = "position:absolute"і style = "position:relative" як вони відрізняються у випадку, якщо я додаю її до div/ span/ inputелементів?

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

css css-position

— Варун
джерело

1

Властивість 'position' у CSS 2.1.

— Джош Лі

@rolfl Гм, чи справді це редагування було потрібне на 3-річному питанні? Я б назвав це "занадто другорядним".

— Містер Лістер

3

@MrLister Він з'явився у черзі на огляд "запропонованого редагування" .... Вік я не помітив. Але, якби це було 60-секундне старе запитання, чи змінило б це?

— rolfl

@rolfl Не дуже; Я б все-таки проголосував "надто другорядним".

— Містер Лістер

178

Абсолютне позиціонування означає, що елемент повністю виведений із нормального потоку макета сторінки. Що стосується решти елементів на сторінці, абсолютно розташований елемент просто не існує. Потім сам елемент малюється окремо, на зразок "вгорі" всього іншого, у позиції, яку ви вказали, використовуючиleft, right, top and bottom атрибути.

Використовуючи позицію, яку ви вказуєте за допомогою цих атрибутів, елемент розміщується в цій позиції в межах останнього елемента предка, який має атрибут позиції нічого іншого, крім static (елементи сторінки за замовчуванням для статичного, коли не вказаний атрибут позиції), або документа документа (браузер viewport), якщо такого предка не існує.

Наприклад, якщо у мене був цей код:

<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 буде розміщений на 20px від верхньої частини outerdiv, а 20px з лівого краю того ж, тому що 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.

Сподіваюсь, що трохи прояснить речі.

— AgentConundrum
джерело

39

Відносне позиціонування: Елемент створює власні осі координат у місці, зміщеному від осі координат вікна перегляду. Це частина документообігу, але зрушена.

Абсолютне позиціонування: елемент шукає найближчі осі координат серед батьківських елементів. Потім елемент розташовується, задаючи зміщення з цієї осі координат. Він вилучається з нормального потоку документа.

Джерело

— Премрай
джерело

15

Ви обов'язково захочете ознайомитись із цією статтею про позиціонування у розділі "A List Apart" Допоміг демістифікувати CSS-позиціонування (що здалося мені божевільним до цієї статті).

— jbrennan
джерело

8

За допомогою позиціонування CSS ви можете розмістити елемент саме там, де ви хочете, на своїй сторінці.

Коли ви збираєтесь використовувати CSS-позиціонування, перше, що вам потрібно зробити, - це використовувати властивість CSS, щоб повідомити браузеру, чи збираєтесь ви використовувати абсолютне або відносне позиціонування.

Обидві позиції мають різні особливості. У CSS Після встановлення позиції ви зможете використовувати верхній, правий, нижній, лівий атрибути.

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

Абсолютний елемент позиції розташований відносно першого батьківського елемента, який має положення, відмінне від статичного.

Відносна позиція

Відносний елемент розташований відносно його нормального положення.

Щоб розташувати елемент відносно, положення властивості встановлюється як відносне. Різниця між абсолютним і відносним позиціонуванням полягає в тому, як обчислюється позиція.

Більше: Відношення позиції проти Абсолюту

— GowriShankar
джерело

6

Добре, тут дуже очевидна відповідь ... в основному відносна позиція відносно попереднього елемента або вікна, тоді як абсолютне байдуже до інших елементів, якщо це не батьків, якщо ви використовуєте верхній і лівий ...

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

Також ви можете бачити це в дії, використовуючи створений для вас 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>

Розгорніть фрагмент

— Аліреза
джерело

4

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

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

^ розміщує елемент у верхній лівій частині вікна.

Відносне положення відносно місця, де елемент розміщений:

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

^ розміщує елемент 1px вниз і 1px зліва від місця, де він спочатку сидів :)

— Деміен-Райт
джерело

3

Відносна:

Елемент з position: relative;розташований відносно його нормального положення.
Якщо ви не додаєте атрибутів позиціонування (верхній, лівий, нижній або правий) на відносний елемент, це взагалі не вплине на його позиціонування. Він поводитиметься саме як position: staticелемент.
Але якщо ви додасте якийсь інший атрибут позиціонування, скажімо, top: 10px ;, він змістить свою позицію на 10 пікселів вниз від того, де зазвичай був би.
Елемент із таким типом позиціонування впливає на інші елементи, а сам він також впливає на інших.

Абсолютний:

Елемент з position: absolute;дозволяє вам розмістити будь-який елемент саме там, де ви хочете. Ви використовуєте атрибути позиціонування вгорі, зліва, внизу. і право встановити місцеположення.
Він розміщується відносно найближчого нестатичного предка. Якщо такого контейнера немає, він розміщується відносно самої сторінки.
Він видаляється з нормального потоку елементів на сторінці.
Елемент із таким типом позиціонування не впливає на інші елементи, а також не впливає на потік інших елементів.

Дивіться цей пояснюючий приклад для кращої ясності. https://codepen.io/nyctophiliac/pen/BJMqjX

— Пранш Тіварі
джерело

0

Абсолютний розміщує об’єкт (div, span тощо) в абсолютно примусовому розташуванні (зазвичай визначається в пікселях), а відносний розмістить його на певній кількості далеко від місця, де зазвичай знаходиться його розташування. Наприклад:

положення: відносне; зліва: -20px;

Можна змусити ліву частину тексту зникнути, якщо вона була в межах 20 пікселів до лівого краю екрана.

— Чарльз Цинк
джерело

0

position: absolute можна розмістити в будь-якому місці і залишитися там, наприклад 0,0.

position: relative розміщується зі зміщенням від місця, яке воно спочатку розміщується в браузері.

— Віль Невідомий
джерело

0

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

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

— Імран Хан
джерело