Posizione assoluta e troppopieno nascosto

Abbiamo due Div, uno incorporato in un altro. Se il DIV esterno non è posizionato in maniera assoluta quindi l’interno un DIV posizionato in maniera assoluta, non rispetta l’overflow hidden del DIV esterno (esempio).

C’è la possibilità di fare l’interno DIV obbedire overflow hidden del DIV esterno, senza impostare il DIV esterno, per la posizione assoluta (causa che infangare il nostro layout completo)?
Anche la posizione relativa del nostro interiore DIV non è un’opzione, come abbiamo bisogno di “crescere” di una tabella TD (exmple).

Ci sono altre opzioni?

InformationsquelleAutor Zardoz | 2011-01-05



4 Replies
  1. 254

    Fare esterno <div> per position: relative e interiore <div> per position: absolute. Dovrebbe funzionare per voi.

    • Grazie ad entrambi. Ho sempre pensato che la posizione relativa è l’impostazione predefinita. Ho appena saputo che la statica è l’impostazione predefinita. Accetto shankhans risposta come entrambe le risposte sono equivalenti e shankhan bisogni po di punti in più 😉
    • Alcuni chiarimenti e/o documentazione sarebbe una grande aggiunta.
  2. 24

    Che cosa circa position: relative per il div esterno? Nell’esempio che nasconde l’interno. Inoltre, non si muove, nel suo layout in quanto non si specifica un top o a sinistra.

  3. 5

    Un posizionamento assoluto, l’elemento è posizionato effettivamente per quanto riguarda un relative genitore, o il più vicino relative genitore. Così l’elemento con overflow: hidden dovrebbe essere tra relative e absolute elementi posizionati:

    <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; 
    }
  4. -3

    Basta fare divs come questo:

    <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 vi aiuterà 🙂

Lascia un commento