Каким образом позиционируются абсолютные и фиксированные элементы блока?

Question

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

Когда у нас есть блочный элемент (display: block), этот элемент содержит полную ширину родительского компонента, если сам элемент root элемент, ширина этого элемента составляет 100%.

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

Может ли кто-нибудь объяснить мне, почему абсолютная позиция и ширина фиксированных элементов не работают как элементы display: block.

https://jsfiddle.net/epbkmzh3/28/

    <div class="container">
      <div style="background: red;"> 1 </div>
    </div>
    
    
    <div class="container" style="position: relative;">
      <div style="position: absolute; background: red;"> 1 </div>
    </div>

Answer 1

Это потому, что позиционирование absolute и fixed удаляет элемент из потока документов.

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

Они по-прежнему являются «блочными» элементами, если они изначально являются блочными элементами (div, p, и c.), если только свойство отображения не изменено с помощью CSS. Отредактируйте для ясности : браузер по-прежнему будет вычислять как display: block, даже если свойство display изменено с помощью CSS.

Вот некоторая документация по потоку документов: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow

Важная часть:

Taking an item out of flow

All elements are in-flow apart from:

    floated items
    items with position: absolute (including position: fixed which acts in the same way)
    the root element (html)

Out of flow items create a new Block Formatting Context (BFC) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page. The root element therefore is out of flow, as the container for everything in our document, and establishes the Block Formatting Context for the document.

Answer 2

Вот спецификация, подробно описывающая, как вы можете найти ширину / высоту любого элемента: https://www.w3.org/TR/CSS21/visudet.html

Оттуда вы можете прочитать для абсолютного элемента, что:

Ограничение, которое определяет используемые значения для этих элементов:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block

Then

Если все три из 'оставлены ',' width 'и' right 'являются' auto ': сначала установите любые значения' auto 'для' margin-left 'и' margin-right 'равными 0. Затем, если свойство' direction 'элемента, устанавливающего stati c -позиция, содержащая блок 'ltr', установите 'left' в позицию stati c и примените правило номер три ниже; в противном случае установите 'right' в позицию stati c и примените правило номер один ниже.

И правило номер три:

'width' и 'right 'are' auto 'и' left 'не' auto ', тогда ширина будет уменьшена до размера . Затем решите «правильно»

Правило номер один также аналогично

И если вы продолжите чтение, вы узнаете, как рассчитать усадку. - по размеру ширина. Вы также заметите, что тот же алгоритм сжатия применяется к float и inline-block элементу

Также обратите внимание, что фиксированный элемент - это частный случай абсолютного, поэтому применяется то же правило. Единственное отличие - это содержащий блок

Фиксированное позиционирование - это подкатегория абсолютного позиционирования. Единственное отличие состоит в том, что для фиксированного блока, содержащий блок устанавливается окном просмотра. ^исх.

Вы также можете видеть, что элементы блока подчиняются почти одинаковому ограничению (без левого / правого), но правила другие :

Следующие ограничения должны соблюдаться среди используемых значения других свойств:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

Затем

Если для 'width' установлено значение 'auto', любое другое 'auto' значения становятся '0', а 'ширина' следует из полученного равенства.

Это даст width = width of containing block

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

.container {
 clear:left;
 margin:5px;
}

<div class="container" style="float:left;position:relative;">
  <div style="display:inline-block; background: red;"> 1 1 1 1 1 1  </div>
</div>

<div class="container" style="float:left;position:relative;">
  <div style="position: absolute; background: red;"> 1 1 1 1 1 1  </div>
</div>

Обратите внимание на то, как абсолютный элемент будет переноситься до наименьшего возможного размера, не выстраивая встроенный блок. Это связано с тем, что содержащий блок также является контейнером shrink-to-fit .

Связано: Почему все переносятся по словам внутри абсолютного элемента, вложенного внутри float или встроенный блочный элемент