Pozycja bezwzględna i ukryta przepełnienie

Mamy dwa DIV, jeden osadzony w drugim. Jeśli zewnętrzna DIV nie jest pozycjonowana bezwzględnie, wówczas wewnętrzna DIV, która jest pozycjonowana absolutnie, nie jest zgodna z przepełnieniem ukrytym przez zewnętrzną DIV ( przykład ).

Czy jest jakaś szansa, aby wewnętrzna DIV była zgodna z przepełnieniem ukrytym przez zewnętrzną DIV bez ustawiania zewnętrznej DIV na pozycję absolutną (bo to zepsuje nasz cały układ)? Również pozycja względna dla naszego wewnętrznego DIV nie jest opcją, ponieważ musimy „wyrosnąć” z tabeli TD ( przykład ).

Są jakieś inne opcje?

Dokonaj zewnętrzna <div>do position: relativei wewnętrzną <div>do position: absolute. To powinno działać dla Ciebie.

A co position: relativez zewnętrznym divem? W przykładzie, który ukrywa wewnętrzną. Nie przeniesie go również w swoim układzie, ponieważ nie określisz góry ani lewej.

Element pozycjonowany absolutnie jest w rzeczywistości pozycjonowany względem relativerodzica lub najbliższego znalezionego krewnego rodzica. Tak więc element z overflow: hiddenpowinien znajdować się pomiędzy relativei absolutepozycjonowanymi elementami:

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

Po prostu robisz divto w ten sposób:

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

Mam nadzieję, że ten kod Ci pomoże :)