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

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

Сообщение Anonymous »

Резюме: ухаживает ли абсолютно позиционированный элемент о своих братьях и сестрах при каких -либо обстоятельствах (независимо от того, являются ли братья и сестры относительными, абсолютными, статичными)? < /p>

Мое понимание было то, что абсолютное позиционирование игнорирует братьев и сестер. >
.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;
}< /code>

outer yellow box


inner yellow box should completely fill up screen

< /code>
< /div>
< /div>
< /p>

У меня есть контейнер ("Over-Container") Полем Абсолютное положение, 100% x ширина и высота 100%. Он занимает весь экран в JSFiddle, как и должно. («Greybox» в скрипке). < /p>

Я затем положил еще один абсолютный 100x100 div в «Внешний контандер». Назовите это «Inner-Container.» Он должен игнорировать братьев и сестер, быть извлеченным из нормального «потока» позиционирования и просто взглянуть на своего ближайшего расположенного предка (внешнего контейнера) при определении его позиции.


Подробнее здесь: https://stackoverflow.com/questions/491 ... t-siblings
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»