Абсолютное положение и переполнение скрыто

135

У нас есть два DIV, один встроен в другой. Если внешний DIV не позиционируется как абсолютный, тогда внутренний DIV, который позиционируется как абсолютный, не подчиняется скрытому переполнению внешнего DIV ( пример ).

Есть ли шанс заставить внутренний DIV подчиняться переполнению, скрытому от внешнего DIV, без установки внешнего DIV в положение абсолютное (потому что это испортит наш полный макет)? Также относительное положение для нашего внутреннего DIV не является вариантом, поскольку нам нужно «вырасти» из таблицы TD ( пример ).

Есть ли другие варианты?

— Zardoz
источник

283

Сделайте внешнее <div>для position: relativeи внутреннее <div>для position: absolute. Это должно сработать для вас.

— shankhan
источник

5

Спасибо вам обоим. Я всегда думал, что позиция: относительная - по умолчанию. Я только что узнал, что статика по умолчанию. Я согласен с ответом шанкхана, поскольку оба ответа эквивалентны, и шанкхану нужно еще несколько очков ;-)

— Зардоз

7

Некоторое объяснение и / или документация будут отличным дополнением.

— showdev

26

А как насчет position: relativeвнешнего div? В примере, который скрывает внутренний. Он также не будет перемещать его в своем макете, поскольку вы не укажете верхнюю или левую часть.

— Tesserex
источник

9

Абсолютно позиционированный элемент фактически позиционируется относительно relativeродителя или ближайшего найденного относительного родителя. Поэтому элемент с overflow: hiddenдолжен быть между relativeи absoluteпозиционированными элементами:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

— Si7ius
источник

-3

Вы просто делаете divэто так:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

Надеюсь, этот код вам поможет :)

— rochano
источник