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

Question

. Только уведомление position:absolute Элементу может быть присвоено значение по умолчанию top, основанное на позиции его «непосредственного родителя» независимо от relative или нет. Согласно BoltClock,

он остается в статическом положении и никуда не уходит.

Вот код:

.container { 
 
    height: 500px; 
 
    width: 300px; 
 
    position: relative; 
 
} 
 

 
.parent { 
 
    height: 200px; 
 
} 
 

 
.child { 
 
    height: 50px; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 

 
.blue { 
 
    background-color: #a6cee3; 
 
    border: 3px solid #1f78b4; 
 
} 
 

 
.green { 
 
    background-color: #b2df8a; 
 
    border: 3px solid #33a02c; 
 
} 
 

 
.red { 
 
    background-color: #fb9a99; 
 
    border: 3px solid #e31a1c; 
 
} 
 

 
.orange { 
 
    background-color: #fdbf6f; 
 
    border: 3px solid #ff7f00; 
 
} 
 

 
.violet { 
 
    background-color: #cab2d6; 
 
    border: 3px solid #6a3d9a; 
 
}

<div class="container blue"> 
 
    <div class="parent orange"></div> 
 
    <div class="parent violet"> 
 
    <div class="child red"></div> 
 
    </div> 
 
</div>

Я хочу, чтобы сделать абсолютный элемент занимают «оставшееся пространство» контейнера, то есть за исключением первого родителя. Моя идея состоит в том, чтобы установить bottom:0, что я ожидаю, top уже установлен каким-то образом, и если установлено bottom, то можно определить высоту и расширить оставшееся пространство, но это не сработает.

Есть ли решение?

Answer 1

Абсолютно позиционированный бокс может взять только на статическом положении, если оба top и bottom (или оба left и right, или все четыре), являются авто. Вы не можете установить смещение с одной стороны и ожидать, что поле останется в статическом положении, так как после смещения поля он больше не находится в статическом положении.

Answer 2

Почему бы не установить width и height вашего абсолютно расположенного дочернего элемента на 100%?

См. this ремикс вашей скрипки.