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

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

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

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

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

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

Абсолютно позиционированный элемент фактически позиционируется относительно 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; 
}

Вы просто делаете 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>

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