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

Ответ 1

Спасибо за все ваши ответы, хотя все они были правильными, никто не решил мою проблему. Решением для меня было создать второй невидимый div в конце содержимого неизвестной длины, этот невидимый div имеет тот же размер, что и мой абсолютно позиционированный div, и установлен как плавающий влево, это гарантирует, что всегда будет пробел в конец моего контента для абсолютно позиционированного div и там, где есть место, он будет располагаться вдоль левого плавающего контента.

Этот ответ был ранее предоставлен здесь: Предотвращение наложения абсолютно позиционированных элементов на текст. Однако я не видел (до сих пор), как применить его к правому нижнему позиционируемому элементу div.

Новая структура выглядит следующим образом:

<div style="position: relative; width:600px;">
        <p>Content of unknown length</p>
        <div>Content of unknown height</div>
        <div id="spacer" style="width: 200px; height: 100px; float:left; display:inline-block"></div>
        <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
    </div>

Ответ 2

Короткий ответ: Нет способа сделать это, используя только CSS.

Длинный ответ: Почему? Потому что, когда вы выполняете position: absolute;, это выводит ваш элемент из регулярного потока документа, поэтому нет никакого способа, чтобы текст имел какие-либо позиционные отношения с ним, к сожалению.

Одна из возможных альтернатив - float: right; ваш div, но если это не достигает того, чего вы хотите, вам придется использовать JavaScript/jQuery или просто придумать лучший макет.

Ответ 3

Если вы работаете с элементами неизвестного размера и хотите использовать position: absolute для них или их братьев и сестер, вам неизбежно придется столкнуться с перекрытием. Установив абсолютную позицию, вы удаляете элемент из потока документов, но поведение, которое вы хотите, - это то, что ваш элемент должен быть перемещен его братьями и сестрами, чтобы не накладываться... т.е. он должен течь! Вы ищете две совершенно противоречивые вещи.

Вы должны переосмыслить свой макет.

Возможно, вы хотите, чтобы элемент .btn был абсолютно позиционирован относительно одного из его предыдущих братьев и сестер, а не против их общего родителя? В этом случае вы должны установить position: relative в элементе, которому вы хотите поместить кнопку, и затем сделать кнопку дочерним элементом этого элемента. Теперь вы можете использовать абсолютное позиционирование и перекрытие управления.

Ответ 4

Что мне подходит, так это использование padding-bottom на братьях и сестрах прямо перед абсолютно позиционированным ребенком. Как и в вашем случае, это будет так:

<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 style="padding-bottom: 100px;">Content of unknown height</div>
    <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"></div>
</div>

Ответ 5

Не могли бы вы добавить стиль z-index для двух разделов, чтобы тот, который вы хотите, был сверху?

Ответ 6

Вы должны установить z-index в абсолютно позиционированное div, которое больше, чем относительное div.

Что-то вроде этого

<div style="position: relative; width:600px; z-index: 10;">
    <p>Content of unknown length</p>
    <div>Content of unknown height</div>
    <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px; z-index: 20;"></div>
</div>

z-index устанавливает расположение слоев по глубине страницы.

Или вы можете использовать float для отображения всего текста нераскрытой длины. Но в этом случае вы не смогли бы полностью позиционировать свой div

<div style="position: relative; width:600px;">
  <div class="btn" style="float: right; width: 200px; height: 100px;"></div>
  <p>Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length Content of unknown length</p>
  <div>Content of unknown height</div>
  <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
</div>​

Ответ 7

Поместите z-indez -1 в ваш абсолютный (или относительный) позиционированный элемент.

Это вытащит это из контекста стека. (Я думаю.) Подробнее о "сложении контекста" читайте здесь: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Ответ 8

<div style="position: relative; width:600px;">
        <p>Content of unknown length</p>
        <div>Content of unknown height</div>
        <div id="spacer" style="width: 200px; height: 100px; float:left; display:inline-block"></div>
        <div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;"></div>
    </div>