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

Non so se c’è un problema, ma mi chiedevo perché l’ 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; } 
 

Demo dal vivo: jsFiddle

Perché un elemento di posizione fissa è fisso rispetto al viewport, non un altro elemento. Pertanto, poiché il viewport non lo sta tagliando, l’overflow diventa irrilevante.

Mentre la posizione e le dimensioni di un elemento con posizione: assoluta sono relative al suo blocco contenitore, la posizione e le dimensioni di un elemento con posizione: fisso sono sempre relative 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

Potresti considerare l’uso della clip: rect(top, right, bottom, left); CSS clip: rect(top, right, bottom, left); per ritagliare un elemento posizionato fisso su un genitore. Guarda la demo su http://jsfiddle.net/lmeurs/jf3t0fmf/ .

Attenzione, usa con cura!

Sebbene lo stile di clip sia ampiamente supportato, i principali svantaggi sono:

  1. La posizione del genitore non può essere statica o relativa (si può usare un genitore assolutamente posizionato all’interno di un contenitore relativamente posizionato);
  2. Le coordinate rette non supportano le percentuali, sebbene il valore auto uguale al 100% , cioè. clip: rect(auto, auto, auto, auto); ;
  3. Possibilita ‘con elementi figlio sono limitati almeno in IE11 e Chrome34, es. non possiamo impostare la posizione degli elementi figli su relativi o assoluti o utilizzare la trasformazione CSS3 come scala.

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

EDIT: Chrome sembra gestire il posizionamento e le trasformazioni CSS3 sugli elementi figlio molto meglio quando si applica la visibilità del backface , quindi per essere sicuri di aver aggiunto:

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

all’elemento figlio principale.

Si noti inoltre che non è completamente supportato dai browser più vecchi / mobili o potrebbe richiedere uno sforzo extra. Guarda la nostra implementazione per il menu di bellafuchsia.com .

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

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

Aggiornamento 2016:

Puoi creare un nuovo contesto di stack, come visto su Coderwall :

 

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

Per gli elementi il ​​cui layout è governato dal modello di box CSS, qualsiasi valore diverso da none per la trasformazione porta alla creazione sia di un contesto di stack che di un blocco contenitore. L’object agisce come un blocco contenitore per i discendenti posizionati fissi.

Se si desidera hide l’overflow su elementi a posizione fissa, l’approccio più semplice che ho trovato è quello di posizionare l’elemento all’interno di un elemento contenitore e applicare la position:fixed e overflow:hidden a quell’elemento invece dell’elemento contenuto (è necessario 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 a posizione fissa (si stava riversando fuori dai limiti del corpo della pagina, indipendentemente overflow:hidden ). Inserendolo in un contenitore fisso con overflow:hidden sul contenitore ha risolto il problema.

In alternativa all’utilizzo della clip potresti anche usare {border-radius: 0.0001px} su un elemento genitore. Funziona non solo con elementi posizionati in modo assoluto / fisso.

Gli elementi di posizione fissi sono posizionati rispetto alla finestra del browser, quindi l’elemento padre è sostanzialmente irrilevante.

Per ottenere l’effetto desiderato, dove l’ overflow sul genitore ritaglia il bambino, usa position: absolute invece: http://jsfiddle.net/DBHUv/1/

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

HTML

 
inner
COL1
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.
COL2

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/