Posizione assoluta e troppo pieno nascosti

134

Abbiamo due DIV, uno incorporato nell'altro. Se il DIV esterno non è posizionato in modo assoluto, il DIV interno, che è posizionato in modo assoluto, non obbedisce al trabocco nascosto del DIV esterno ( esempio ).

C'è qualche possibilità che il DIV interno obbedisca al trabocco nascosto del DIV esterno senza impostare il DIV esterno in posizione assoluta (causa che comprometterà il nostro layout completo)? Anche la posizione relativa per il nostro DIV interno non è un'opzione in quanto dobbiamo "crescere" di una tabella TD ( esempio ).

Ci sono altre opzioni?

— Zardoz
fonte

282

Fare esterna <div>per position: relativee interno <div>a position: absolute. Dovrebbe funzionare per te.

— shankhan
fonte

5

Grazie a entrambi. Ho sempre pensato alla posizione: relativo è il valore predefinito. Ho appena imparato che statico è l'impostazione predefinita. Accetto la risposta di Shankhan poiché entrambe le risposte sono equivalenti e Shankhan ha bisogno di altri punti ;-)

— Zardoz,

7

Qualche spiegazione e / o documentazione sarebbe un'ottima aggiunta.

— showdev,

25

Che dire position: relativedel div esterno? Nell'esempio che nasconde quello interiore. Inoltre non lo sposterà nel suo layout poiché non si specifica in alto o a sinistra.

— Tesserex
fonte

9

Un elemento assolutamente posizionato viene effettivamente posizionato rispetto a un relativegenitore, o al genitore relativo trovato più vicino. Quindi l'elemento con overflow: hiddendovrebbe essere tra relativee absoluteposizionati elementi:

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

-3

Devi solo fare divs in questo modo:

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

Spero che questo codice ti aiuti :)

— rochano
fonte