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?
A co
position: relative
z 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.źródło
Element pozycjonowany absolutnie jest w rzeczywistości pozycjonowany względem
relative
rodzica lub najbliższego znalezionego krewnego rodzica. Tak więc element zoverflow: hidden
powinien znajdować się pomiędzyrelative
iabsolute
pozycjonowanymi 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; }
źródło
Po prostu robisz
div
to 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 :)
źródło