Evitare che un elemento venga troncato quando si trova all'interno di un elemento "overflow: hidden"

Question

Utilizzo il trucco CSS con altezze uguali come descritto in questo .

Stava funzionando tutto bene fino ad oggi quando ho bisogno di aggiungere una finestra di dialogo all'interno di una delle colonne, che è assolutamente posizionata per portarlo fuori dal flusso. Il problema è che poiché il contenitore ha "overflow: hidden" su di esso, il dialogo viene interrotto quando si trabocca.

Oltre a portare il dialogo all'esterno dell'elemento contenitore, esiste un modo per farlo visualizzare tramite CSS?

Ecco un piccolo esempio che dimostra ciò che ho menzionato.

<style> 
.container { overflow: hidden; margin-top: 30px } 
.col { 
    float: left; 
    padding-bottom: 2000px; 
    margin-bottom: -2000px; 
    border-right: 1px solid black; 
    width: 100px; 
    background-color: grey; 
} 
.col.third { border-right: none } 

#div-a { position: relative } 
#div-b { 
    position: absolute; 
    background-color: red; 
    width: 35px; 
    height: 350px; 
    bottom: 0; 
    right: 0; 
    margin: 5px; 
    border: 2px solid black; 
} 
</style> 

<div class="container"> 
    <div class="col first"> 
     <p style="height: 100px">One</p> 
    </div> 
    <div class="col second"> 
     <p style="height: 300px">Two</p> 
     <div id="div-a"> 
      <!-- this gets cut off by the "overflow: hidden" on div.container --> 
      <div id="div-b"> 
       Foo 
      </div> 
     </div> 
    </div> 
    <div class="col third"> 
     <p style="height: 200px">Three</p> 
    </div> 
</div> 

si vede che div#div-b viene tagliata in alto quando trabocca nell'elemento div.container.

Answer 1

Sfortunatamente ciò che si vuole fare è impossibile senza portare il dialogo all'esterno dell'elemento contenitore.

La soluzione migliore è rendere l'elemento di dialogo un fratello del contenitore e posizionarlo in questo modo.

Answer 2

Purtroppo no ... Non penso che ci sia un modo per aggirare l'overflow: nascosto con posizione assoluta. Puoi sperimentare con la posizione: riparato, ma non ti posizionerai sotto le stesse condizioni se lo usi.

Answer 3

Un'opzione potrebbe essere quella di posizionare il contenuto del proprio overflow: contenitore nascosto in un sottocontenitore (forse una div child). Quindi, imposta il sub-contenitore che corrisponde alle dimensioni del contenitore e sposta l'overflow: nascosto dal contenitore al sotto-contenitore.

Quindi, è possibile rendere la finestra di dialogo figlio del contenitore (un fratello del sottocontenitore), e ora esisterà in un elemento che NON ha overflow: nascosto.

Non ho provato questo e rimuovendo l'overflow: nascosto dal contenitore potrebbe interrompere la progettazione. In tal caso, suggerirei di farlo come altri e di spostare completamente la finestra di dialogo all'esterno del contenitore. Questo potrebbe anche essere fatto tramite Javascript se non hai la possibilità di mettere il codice della finestra di dialogo in nessun altro posto. (Javascript potrebbe rendere la finestra di dialogo un figlio di BODY, o qualche altro tag, quando ne avrai bisogno)