Остановить абсолютно позиционированный div от наложения текста

Вот упрощение моего макета:

    <div style="position: relative; width:600px;">
        <p>Content of unknown length, but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long</p>
        <div>Content of unknown height</div>
        <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"></div>
    </div>

Проблема, с которой я сталкиваюсь, состоит в том, что если текст / неизвестный контент div слишком длинный, он перекрывает мой абсолютно позиционированный div.

Я искал в Интернете и SO решение, и единственное, что я нашел, предлагало поместить невидимый div, где находится абсолютно позиционированный div - проблема в том, что если бы я мог сделать это, мне не понадобилось бы иметь абсолютно позиционированный div в первую очередь ( или я здесь упускаю смысл).

Может кто-нибудь придумать решение css, прежде чем я пойду по маршруту jquery?

Ответы на вопрос(7)

Ваш ответ на вопрос