Rendi il bambino visibile al di fuori di un overflow: genitore nascosto

100

In CSS overflow:hiddenè impostato sui contenitori padre per consentirne l'espansione con l'altezza dei loro figli fluttuanti.

Ma ha anche un'altra caratteristica interessante se combinato con margin: auto...

Se il fratello PRECEDENTE è un elemento fluttuante, apparirà effettivamente giustapposto ad esso. Cioè, se il fratello è, float:leftil contenitore con float:none overflow:hiddenapparirà a destra del fratello, senza una nuova riga, proprio come se fluttuasse nel flusso normale. Se il fratello precedente lo è, float:rightil contenitore apparirà a sinistra del fratello. Il ridimensionamento di questo contenitore lo mostrerà accuratamente centrato tra gli elementi mobili. Supponiamo che se hai due fratelli precedenti, uno float:leftsull'altro float:right, il contenitore apparirà centrato tra i due.

Quindi ecco il problema ...

Come mantengo quel tipo di layout SENZA mascherare i bambini?

Googling in tutto il Web mi dà modi su come clear:bothed espandere un contenitore ... ma non riesco a trovare alcuna soluzione alternativa per mantenere la centratura sinistra / destra del bambino precedente. Se crei il contenitore, overflow:visibleil contenitore ignora improvvisamente il flusso di layout degli elementi fluttuanti e appare stratificato sopra l'elemento fluttuante.

Quindi domanda :

Devo avere il contenitore overflow:hiddenper preservare il layout ...

come posso fare in modo che i bambini non siano mascherati? Ho bisogno che il bambino sia assolutamente posizionato rispetto al genitore fuori dal contenitore.

O

Come faccio in overflow:visiblemodo da poter assolutamente posizionare un figlio rispetto al genitore fuori dal contenitore ... ANCORA preservare il flusso di layout simile a un galleggiante fratello?

— marknadal
fonte

86

Puoi usare clearfixper fare "preservare il layout" allo stesso modo overflow: hidden.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

aggiungi class="clearfix"classe al genitore e rimuovioverflow: hidden;

— Frexuz
fonte

Hmm! Intelligente, lo sto sperimentando solo ora. Quello che sto ottenendo attualmente è che il contenuto generato si comporta correttamente, essendo preservato nel flusso del layout, tuttavia il genitore lo ignorerà ancora e si sovrapporrà agli elementi mobili. Tuttavia, questa è un'ottima idea e ci giocherò di più per vedere se riesco a farlo comportare correttamente e tornare a votare. Grazie :).

— marknadal

@ user1671639 il tuo esempio non si applica realmente per una clearfix. Hai bisogno di qualcos'altro, quindi ti suggerisco di pubblicare una domanda con il tuo problema.

— Frexuz

Questo non funziona affatto allo stesso modo overflow:hidden. L'applicazione di un clearfix al div genitore non consente a tutti i componenti figlio di essere "contenuti all'interno" della stessa altezza del genitore.

— Khom Nazid

11

Nessuna delle risposte pubblicate ha funzionato per me. position: absoluteTuttavia, l' impostazione per l'elemento figlio ha funzionato.

— reflexiv
fonte

18

Ma il DIV genitore non lo maschererebbe se andasse oltre i confini del DIV genitore (che ha overflow: nascosto)?

— marknadal

9

Afaik no, fintanto che il genitore non ha una posizione: relativa. Quindi il bambino viene posizionato rispetto al suo primo elemento antenato posizionato (non statico), estraendolo dal flusso dom regolare (genitore).

— Pim Schaaf

Se il genitore ha position: relative e non lo richiede puoi renderlo position: unset.

— yeahlad

Vero, se è position: fixedo è posizionato in modo assoluto rispetto a qualcosa al di fuori del genitore che ha visibility: hidden, sarà visibile. Tuttavia, spesso è necessario (si desidera) posizionarlo rispetto al genitore per essere più robusto alle modifiche al codice. Quindi queste soluzioni non sono un'alternativa.

— ArneHugo,

10

Questa è una vecchia domanda, ma l'ho riscontrata io stesso.

Ho semi-soluzioni che funzionano in base alla situazione per la domanda precedente ("Bambini visibili in overflow: genitore nascosto")

Se il div genitore non ha bisogno di essere position: relative, imposta semplicemente gli stili figli su visibile: visibile.

Se il div genitore deve essere position: relative, l'unico modo che ho trovato per mostrare i figli era position: fixed. Questo ha funzionato per me nella mia situazione fortunatamente, ma immagino che non funzionerebbe negli altri.

Ecco un esempio schifoso da visualizzare in un file html.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

— Thomas Davis
fonte

Ecco un esempio schifoso da visualizzare in un file html. <code> <div style = "background: # ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;"> <div style = "background: # ff0000; position: fixed; top: 10px; left : 10px; "> asd <div style =" background: # 00ffff; larghezza: 200 px; overflow: visibile; posizione: assoluta; visibilità: visibile; chiaro: entrambi; altezza: 1000 px; in alto: 100 px; sinistra: 10 px; "> a </div> </div> </div> </code>

— Thomas Davis

4

Grazie per aver provato a rispondere, ma questo non funziona perché la posizione fissa posiziona automaticamente l'elemento rispetto alla visualizzazione, il che significa che non si sposta con il genitore. In effetti, se hai una pagina a scorrimento, rimarrà a 10px, 10px mentre scorri.

— marknadal

"Se il div genitore deve essere position: relative, l'unico modo che ho trovato per mostrare i figli era position: fixed." Grazie per quello. Ho avuto una bolla di aiuto popover che doveva traboccare anche se il genitore aveva overflow: scorrere. Ho finito per avere un div assoluto, con un'area interna relativa e quindi un'area di contenuto fissa.

— JackMorrissey

Grazie, ha funzionato per me. Avevo un genitore con posizione relativa, ed era necessario perché la sua posizione era impostata utilizzando left. Usare margin-leftinvece avrebbe ottenuto lo stesso effetto, quindi non ho più bisogno di usare la posizione relativa.

— Felipe Castro

1

Per altri, se clearfix non risolve questo problema, aggiungi margini al fratello non flottato che è / sono gli stessi della larghezza del fratello flottato.

— Walf
fonte