Может ли позиция: абсолютные элементы как-то высовываться из переполнения: скрытые контейнеры?

Question

Я подозреваю, что ответ довольно однозначный - нет, но учитывая следующие html и css, есть ли некоторая подстройка (без редактирования html), которую я могу сделать, чтобы получить абсолютно позиционируемую «вещь» для отображения, сохраняя при этом скрытый другой переполненный контент.

<div class="wrap">
<p>Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. Loads of words. </p>
   <div class="thing">thing</div>
</div>

.wrap {
  width: 100px;
  height: 100px; 
  overflow:hidden;
  position:relative;
}

.thing {
   position:absolute;
   top: -3px;
   right: -10px;
}

Answer 1

Если вы не возражаете против Javascript, можно обойтись без изменения структуры HTML. Он работает, устанавливая position: fixed; top: auto; left: auto; на thing и затем настраивая положение thing при прокрутке страницы - я делаю это с помощью свойства margin-top css.

Пример: http://jsfiddle.net/sparebytes/zxwL8/

Одна проблема заключается в том, что у каждого предка thing должно быть вручную связано событие прокрутки, поскольку это событие не всплывает в цепочке.

Редактировать Недостатком является то, что thing может быть отрезан, если он простирается за нижнюю часть body, потому что фиксированные элементы не могут сделать своих родителей больше

Answer 2

Нет, вам нужно установить высоту / ширину содержимого вместо самого элемента .wrap. Решением будет внутренний div рядом с .thing.

Answer 3

Ответ: Да.

Это можно сделать без Javascript и без перемещения любого HTML.

Установите родительский Div и присвойте ему те же значения высоты, что и для .wrap

<div class="parent_wrap" style="width: 100px; height: 100px; ">

Затем увеличьте ширину '.wrap'

<div class="wrap" style="width: 999px;">

Пожалуйста, посмотрите мой живой пример: http://jsfiddle.net/7o1e0ga0/2/

Answer 4

Вы можете использовать div для внутренней оболочки вокруг тега <p>, а затем продублировать правила .wrap:

.innerwrapper {
  width: 100px;
  height: 100px; 
  overflow:hidden;
  position:relative;
}

Затем удалите overflow:hidden из .wrap.

(Вы могли бы также добавить эти правила к тегу <p> вместо этого, если бы был только один <p>)