Pozycja bezwzględna i ukryta przepełnienie

138

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?

Zardoz
źródło

Odpowiedzi:

289

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

shankhan
źródło
5
Dzięki wam obojgu. Zawsze myślałem, że pozycja: względna jest domyślna. Właśnie dowiedziałem się, że statyczny jest domyślny. Akceptuję odpowiedź shankhana, ponieważ obie odpowiedzi są równoważne, a shankhan potrzebuje więcej punktów ;-)
Zardoz
7
Pewne wyjaśnienia i / lub dokumentacja byłyby świetnym dodatkiem.
showdev
27

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.

Tesserex
źródło
12

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; 
}
Si7ius
źródło
-3

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

rochano
źródło