genitore e figlio con posizione corretta, overflow principale: bug nascosto

Question

Non so se c'è un problema, ma mi chiedevo perché lo overflow:hidden non funzioni sull'elemento genitore/figlio fixed.

Ecco un esempio:

CSS e HTML:

.parent{ 
 
    position:fixed; 
 
    overflow:hidden; 
 
    width:300px; 
 
    height:300px; 
 
    background:#555; 
 
} 
 
.children{ 
 
    position:fixed; 
 
    top:200px; 
 
    left:200px; 
 
    width:150px; 
 
    height:150px; 
 
    background:#333; 
 
}

<div class="parent"> 
 
    <div class="children"> 
 
    </div> 
 
</div>

demo dal vivo: jsFiddle

Answer 1

Perché un elemento di posizione fissa è fissato con r guardare al viewport, non un altro elemento. Pertanto, poiché il viewport non lo sta tagliando, l'overflow diventa irrilevante.

considerando la posizione e le dimensioni di un elemento con posizione: assoluta sono relative al suo blocco contenitore, la posizione e dimensioni di un elemento con position: fixed sono sempre relativi al blocco contenitore iniziale. Questo è normalmente il viewport: la finestra del browser o la casella della pagina della carta.

ref: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

Answer 2

elementi posizione fissa sono posizionati relativamente alla finestra del browser, quindi l'elemento principale è sostanzialmente irrilevante.

Per ottenere l'effetto desiderato, dove il overflow sulle clip genitore del bambino, utilizzare position: absolute invece: http://jsfiddle.net/DBHUv/1/

Answer 3

Ho avuto un simile, problema abbastanza complesso con un layout fluido, dove la colonna di destra aveva una fissa la larghezza e quella sinistra avevano una larghezza flessibile. Il mio contenitore fisso dovrebbe avere la stessa larghezza della colonna flessibile. Qui è la mia soluzione:

HTML

<div id="wrapper"> 
    <div id="col1"> 
    <div id="fixed-outer"> 
     <div id="fixed-inner">inner</div> 
    </div> 
    COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <div id="col2">COL2</div> 
</div> 

CSS

#wrapper { 
    padding-left: 20px; 
} 

#col1 { 
    background-color: grey; 
    float: left; 
    margin-right: -200px; /* #col2 width */ 
    width: 100%; 
} 

#col2 { 
    background-color: #ddd; 
    float: left; 
    height: 400px; 
    width: 200px; 
} 

#fixed-outer { 
    background: yellow; 
    border-right: 2px solid red; 
    height: 30px; 
    margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */ 
    overflow: hidden; 
    padding-right: 200px; /* #col2 width */ 
    position: fixed; 
    width: 100%; 
} 

#fixed-inner { 
    background: orange; 
    border-left: 2px solid blue; 
    border-top: 2px solid blue; 
    height: 30px; 
    margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */ 
    position: absolute; 
    width: 100%; 
} 

Demo Live: http://jsfiddle.net/hWCub/

Answer 4

Si potrebbe considerare l'utilizzo di CSS clip: rect(top, right, bottom, left); per ritagliare una posi fisso elemento a un genitore. Vedi demo allo http://jsfiddle.net/lmeurs/jf3t0fmf/.

Attenzione, usare con cautela!

Sebbene lo stile clip è ampiamente supportato, principali svantaggi sono che:

1. posizione della madre non può essere statico o relativo (si può usare un genitore assolutamente posto all'interno di un contenitore posizionato in modo relativo);
2. Le coordinate rect non supportano le percentuali, anche se il valore corrisponde a 100%, ad es. clip: rect(auto, auto, auto, auto);;
3. Possibillities con elementi figlio sono limitati almeno in IE11 & Chrome34, ad es. non possiamo impostare la posizione degli elementi figli su relativi o assoluti o utilizzare la trasformazione CSS3 come scala.

Vedere http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ per ulteriori informazioni.

EDIT: Chrome sembra gestire il posizionamento di CSS3 e trasforma in elementi figlio molto meglio quando si applica backface-visibility, quindi solo per essere sicuri abbiamo aggiunto:

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 

per l'elemento figlio principale.

Si noti inoltre che non è completamente supportato dai browser precedenti/mobili o potrebbe richiedere qualche sforzo in più. Guarda la nostra implementazione per il menu allo bellafuchsia.com.

1. IE8 mostra bene il menu, ma i collegamenti di menu non sono cliccabili;
2. IE9 non mostra il menu sotto la piega;
3. iOS Safari < 5 non mostra bene il menu;
4. iOS Safari 5+ ripete il contenuto ritagliato sullo scorrimento dopo lo scorrimento;
5. FF (almeno 13+), IE10 +, Chrome e Chrome per Android sembrano funzionare bene.

EDIT 2014-11-02: L'URL demo è stato aggiornato.

Answer 5

2016 aggiornamento:

È possibile creare un nuovo contesto di stratificazione, come visto su Coderwall:

<div style="transform: translate3d(0,0,0);overflow:hidden"> 
    <img style="position:fixed; ..." /> 
</div> 

che si riferisce alla http://dev.w3.org/csswg/css-transforms/#transform-rendering

Per gli elementi la cui disposizione è governata da il modello di box CSS, qualsiasi valore diverso da none per la trasformazione porta alla creazione sia di un contesto di stack che di un blo contenente ck. L'oggetto agisce come un blocco contenitore per i discendenti posizionati fissi.

Answer 6

Se si desidera nascondere trabocco su elementi a posizione fissa, l'approccio più semplice che ho trovato è quello di mettere l'elemento all'interno di un elemento contenitore, e applicare position:fixed e overflow:hidden a quell'elemento invece che l'elemento di cui (si deve rimuovere position:fixed dall'elemento contenuto affinché questo funzioni). Il contenuto del contenitore fisso dovrebbe quindi essere ritagliato come previsto.

Nel mio caso ho avuto problemi con l'utilizzo di object-fit:cover su un elemento di posizione fissa (si stava verificando fuoriuscire dai limiti del corpo della pagina, indipendentemente da overflow:hidden). Inserendolo in un contenitore fisso con overflow:hidden sul contenitore è stato risolto il problema.