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

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

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

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

Ответ 1

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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