Абсолютная позиция смотрит на своего ближайшего предка, заботятся ли она о братьях и сестрах?

Резюме: заботится ли абсолютно позиционированный элемент о своих братьях и сестрах при любых обстоятельствах (являются ли братья относительными, абсолютными, статическими)?

Насколько я понимаю, абсолютное позиционирование игнорирует братьев и сестер.

.absoluteBox {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: yellow;
  border: 1px solid red;
  box-sizing: border-box;
  top: 0;
  /* 
why is top 0 necessary?
If i do not set it, the inner yellow box will position itself after the grey box
The grey box has no position property assigned to it, and even if it did, it should not matter
  -- because the inner-absolute box should just be looking to its ancestor for its position
*/
}

.greyBox {
  display: flex;
  height: 20px;
  width: 50px;
  background-color: grey;
}
<div class="absoluteBox">
  outer yellow box
  <div class="greyBox"></div>
  <div class="absoluteBox">
    inner yellow box should completely fill up screen
  </div>
</div>

У меня есть контейнер ("Внешний контейнер"). Абсолютное положение, 100% x 100% ширины и высоты. Он занимает весь экран в jsFiddle, как и должно быть.

Я поместил ребенка во «Внешний контейнер», без свойств, связанных с позицией. ("greyBox" в скрипке).

Затем я поместил еще один div Absolute 100x100 внутрь «Внешнего контейнера». Назовите это «Внутренний контейнер».

ПРОБЛЕМА: Почему Inner-Container располагается после greyBox? Он должен игнорировать братьев и сестер, быть выведенным из нормального «потока» позиционирования и просто смотреть на своего ближайшего позиционированного предка (внешний контейнер) при определении его положения.


css absolute position siblings
person Chan Kwon    schedule 05.03.2018    source источник
comment
Если элемент absolute не имеет свойств положения (верхнее, правое, нижнее, левое), то он займет свое место в соответствии с его положением в HTML как обычный элемент.   -  person Brett DeWoody    schedule 06.03.2018
comment
Такое поведение имеет больше смысла, если подумать. Спасибо   -  person Chan Kwon    schedule 06.03.2018
comment
Я объяснил это более подробно в ответе.   -  person Brett DeWoody    schedule 06.03.2018
comment
какое-либо из решений решило вашу проблему?   -  person Brett DeWoody    schedule 08.03.2018

Ответы (2)


arrow_upward
1
arrow_downward

Если свойства top, right, bottom или left НЕ определены для элемента position: absolute, элемент будет позиционироваться в соответствии с его положением в HTML.

Таким образом, элемент position: absolute заботится о своих предшествующих братьях и сестрах, поскольку он будет использовать предыдущие братья и сестры для определения своей позиции в макете.

Но элемент position: absolute ДЕЙСТВИТЕЛЬНО влияет на расположение последующих дочерних элементов и размер родительского элемента position: absolute.

Последующие братья и сестры элемента position: absolute будут игнорировать его и позиционировать себя так, как будто элемент position: absolute отсутствует.

И родительский элемент position: absolute не сохранит место для каких-либо absolute дочерних элементов. Таким образом, даже если элемент absolute больше, чем его родитель, родитель не будет увеличиваться, чтобы содержать элемент absolute.

.absoluteBox {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: rgba(255, 255, 0, 0.5);
  border: 1px solid red;
  box-sizing: border-box;
}

.absoluteBox2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 0, 0.5);
  border: 1px solid red;
  box-sizing: border-box;
}

.greyBox {
  display: flex;
  height: 20px;
  width: 50px;
  background-color: grey;
}
<div class="absoluteBox">
  outer yellow box
  <div class="greyBox"></div>
  <div class="absoluteBox2">
    inner yellow box should completely fill up screen
  </div>
  <div class="greyBox"></div>
</div>

person Brett DeWoody    schedule 05.03.2018

arrow_upward
0
arrow_downward

Проверьте это: https://www.w3.org/TR/css-position-3/#abs-non-replaced-height

Убрав лишнее, вы увидите такие спецификации, как «Если top и bottom являются автоматическими, а height не автоматическими, то установите верхнюю часть в статическое положение, а затем определите нижнюю».

Это означает, что по умолчанию он использует свои значения position: static, что вы и видите, поскольку он не имеет унаследованной или явной ссылки. На самом деле Бретт довольно хорошо определил это. Значения position: static берутся из того места, где элемент был первоначально нарисован, поэтому предшествующие дочерние элементы учитываются при вычислении значения position: static, а последующие дочерние элементы — нет, и размещаются так, как если бы абсолютный элемент не существовал в потоке DOM.

Немного утомительно, но есть куча правил спецификации CSS, которые имеют еще меньше смысла (например, непрозрачность, влияющая на z-index, или тот факт, что вертикальное заполнение на основе процентов относится к родительскому элементу ). ширина не высота...)

person Xhynk    schedule 05.03.2018
comment
в компоненте, над которым я сейчас работаю, возникла та же проблема, у кого-нибудь есть решение для этого, пожалуйста? @Xhynk - person Manoj; 16.02.2021