Положение нижнего края элемента внутри контейнера

Question

У меня есть контейнер div (красный) с верхним заполнением 400 пикселей. Содержимое внутри (синее) может быть любой высоты. У меня также есть другой элемент (зеленый) с фиксированной шириной, но с переменной высотой в зависимости от содержимого.

Я хочу, чтобы иметь возможность расположить нижний край зеленого элемента в верхней части синего контента (т.е. 400px от верхней части красного контейнера).

Пример разметки

<div class="red-container"> 

    <div class="green-thingy">Some text here</div> 

    <div class="blue-content"> 
     <p>blah blah blah...</p> 
     <p>blah blah blah...</p> 
    </div> 
</div> 

Кто-нибудь знает какие-либо CSS трюков, которые позволили бы мне это сделать?

Answer 1

Вы не можете позиционировать нижнюю часть элемента относительно верха родительского элемента.

Добавьте еще один элемент с высотой 400, расположенный в верхней части контейнера, и поставьте зеленый треугольник внутри него, расположенный внизу.