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

Question

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

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

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

Answer 1

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

Answer 2

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

Answer 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; 
}

Answer 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>

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