Eltern & Kind mit fester Position, Elternüberlauf: versteckter Fehler

Ich weiß nicht, ob es ein Problem gibt, aber ich habe mich gefragt, warum der overflow:hidden funktioniert nicht auf fixed Eltern / Kinder-Element.

Hier ist ein Beispiel:

CSS und 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; } 
 

Live-Demo: jsFiddle

Da ein festes Positionselement in Bezug auf das Ansichtsfenster festgelegt ist, ist kein anderes Element vorhanden. Da das Ansichtsfenster es nicht abschneidet, wird der Überlauf daher irrelevant.

Während die Position und die Dimensionen eines Elements mit position: absolute relativ zu seinem umschließenden Block sind, sind die Position und die Dimensionen eines Elements mit position: fixed immer relativ zum ursprünglichen umschließenden Block. Dies ist normalerweise das Ansichtsfenster: das Browserfenster oder die Seitenbox des Papiers.

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

Sie könnten einen CSS- clip: rect(top, right, bottom, left); ein fest positioniertes Element an ein Elternelement anhängen. Siehe Demo unter http://jsfiddle.net/lmeurs/jf3t0fmf/ .

Vorsicht, Vorsicht!

Obwohl der Clip-Stil weitgehend unterstützt wird, sind die Hauptnachteile, dass:

  1. Die Position des Elternteils kann nicht statisch oder relativ sein (man kann ein absolut positioniertes Elternteil in einem relativ positionierten Container verwenden);
  2. Die reellen Koordinaten unterstützen keine Prozentsätze, obwohl der auto Wert gleich 100% , d. clip: rect(auto, auto, auto, auto); ;
  3. Möglichkeiten mit Kindelementen sind in mindestens IE11 & Chrome34 begrenzt, dh. Wir können die Position von untergeordneten Elementen nicht auf relativ oder absolut festlegen oder CSS3-transformieren wie Maßstab verwenden.

Siehe http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ für weitere Informationen.

BEARBEITEN: Chrome scheint die Positionierung von und CSS3-Transformationen auf untergeordneten Elementen viel besser zu handhaben, wenn Backface-Sichtbarkeit angewendet wird , also um sicher zu sein, dass wir hinzugefügt haben:

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

zum Hauptkindelement.

Beachten Sie auch, dass es von älteren / mobilen Browsern nicht vollständig unterstützt wird oder dass es möglicherweise etwas zusätzlichen Aufwand erfordert. Sehen Sie unsere Implementierung für das Menü bei bellafuchsia.com .

  1. IE8 zeigt das Menü gut, aber Menüverknüpfungen sind nicht anklickbar;
  2. IE9 zeigt nicht das Menü unter der Falte;
  3. iOS Safari <5 zeigt das Menü nicht gut an;
  4. iOS Safari 5+ malt den ausgeschnittenen Inhalt nach dem Scrollen neu;
  5. FF (mindestens 13+), IE10 +, Chrome und Chrome für Android scheinen gut zu spielen.

EDIT 2014-11-02: Demo-URL wurde aktualisiert.

2016 Aktualisierung:

Sie können einen neuen Stapelkontext erstellen, wie in Coderwall angezeigt :

 

Was bezieht sich auf http://dev.w3.org/csswg/css-transforms/#transform-rendering

Bei Elementen, deren Layout vom CSS-Boxmodell bestimmt wird, führt jeder Wert, der nicht für die Transformation nicht vorhanden ist, zur Erstellung eines Stapelkontexts und eines umschließenden Blocks. Das Objekt fungiert als umgebender Block für fest positionierte Nachkommen.

Wenn Sie den Überlauf von Elementen mit fester Position ausblenden möchten, besteht der einfachste Ansatz darin, das Element in ein Containerelement einzufügen und position:fixed und overflow:hidden anstelle des enthaltenen Elements auf dieses Element anzuwenden (Sie müssen es entfernen) position:fixed aus dem enthaltenen Element getriggers, damit dies funktioniert). Der Inhalt des festen Containers sollte dann wie erwartet abgeschnitten werden.

In meinem Fall hatte ich Probleme mit der Verwendung von object-fit:cover auf einem festen Positionselement (es wurde außerhalb der Grenzen des Seitenkörpers verschüttet, ungeachtet des overflow:hidden ). Platzieren Sie es in einen festen Behälter mit overflow:hidden auf dem Container behoben das Problem.

Als Alternative zur Verwendung eines Clips können Sie auch {border-radius: 0.0001px} für ein Elternelement verwenden. Es funktioniert nicht nur mit absoluten / fest positionierten Elementen.

Feste Positionselemente werden relativ zum Browserfenster positioniert, so dass das Elternelement im Grunde irrelevant ist.

Um den gewünschten Effekt zu erhalten, verwenden Sie stattdessen position: absolute : http://jsfiddle.net/DBHUv/1/

Ich hatte ein ähnliches, ziemlich komplexes Problem mit einem flüssigen Layout, wo die rechte Spalte eine feste Breite und die linke eine flexible Breite hatte. Mein fester Container sollte die gleiche Breite wie die flexible Spalte haben. Hier ist meine Lösung:

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%; } 

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