it-swarm.com.de

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

Ich weiß nicht, ob es ein Problem gibt, aber ich habe mich gefragt, warum das overflow:hidden funktioniert nicht für fixed übergeordnetes/untergeordnetes 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;
}
<div class="parent">
  <div class="children">
  </div>
</div>

Live-Demo: jsFiddle

49
kirkas

Da ein Element mit fester Position in Bezug auf das Ansichtsfenster festgelegt ist, handelt es sich nicht um ein anderes Element. Da das Ansichtsfenster es daher nicht abschneidet, ist der Überlauf irrelevant.

Während die Position und die Abmessungen eines Elements mit der Position "Absolut" relativ zum enthaltenen Block sind, beziehen sich die Position und die Abmessungen eines Elements mit der Position "Fest" immer auf den anfänglichen enthaltenen Block. Dies ist normalerweise das Ansichtsfenster: das Browserfenster oder das Seitenfeld des Papiers.

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

43
j08691

Sie können die Verwendung von CSS clip: rect(top, right, bottom, left); in Betracht ziehen, um ein fest positioniertes Element einem übergeordneten Element zuzuordnen. Siehe Demo unter http://jsfiddle.net/lmeurs/jf3t0fmf/ .

Vorsicht, vorsichtig verwenden !

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

  1. Die Position des übergeordneten Elements kann nicht statisch oder relativ sein (man kann ein absolut positioniertes übergeordnetes Element in einem relativ positionierten Container verwenden).
  2. Die richtigen Koordinaten unterstützen keine Prozentsätze, obwohl der Wert von auto gleich 100% Ist, dh. clip: rect(auto, auto, auto, auto);;
  3. Möglichkeiten mit untergeordneten Elementen sind in mindestens IE11 und Chrome34 begrenzt, dh. Wir können die Position von untergeordneten Elementen nicht auf relativ oder absolut setzen oder CSS3-transformierte Skalierung verwenden.

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

EDIT: Chrome scheint die Positionierung von und CSS3-Transformationen für untergeordnete Elemente viel besser zu handhaben, wenn Backface-Visibility angewendet wird, um sicherzugehen, dass wir Folgendes hinzugefügt haben:

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

zum untergeordneten Hauptelement.

Beachten Sie auch, dass dies von älteren/mobilen Browsern nicht vollständig unterstützt wird oder zusätzliche Anstrengungen erforderlich sind. Das Menü finden Sie in unserer Implementierung unter bellafuchsia.com .

  1. IE8 zeigt das Menü gut an, aber Menü-Links können nicht angeklickt werden.
  2. IE9 zeigt das Menü unter dem Falz nicht an;
  3. iOS Safari <5 zeigt das Menü nicht gut an.
  4. iOS Safari 5+ aktualisiert den beschnittenen Inhalt beim Scrollen nach dem Scrollen.
  5. FF (mindestens 13+), IE10 +, Chrome und Chrome für Android= scheinen Nice zu spielen.

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

79
lmeurs

Update 2016:

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

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

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

Für Elemente, deren Layout vom CSS-Box-Modell bestimmt wird, wird durch jeden anderen Wert als none für die Transformation sowohl ein Stapelkontext als auch ein enthaltender Block erstellt. Das Objekt fungiert als umschließender Block für fest positionierte Nachkommen.

24
Hugo H

Alternativ zur Verwendung von clip können Sie auch {border-radius: 0.0001px} Für ein übergeordnetes Element verwenden. Es funktioniert nicht nur mit absolut/fest positionierten Elementen.

8
ZhenyaUsenko

Wenn Sie den Überlauf bei Elementen mit fester Position ausblenden möchten, besteht der einfachste Ansatz darin, das Element in einem Containerelement zu platzieren und position:fixed Und overflow:hidden Auf dieses Element anstelle von anzuwenden Enthaltenes Element (Sie müssen position:fixed aus dem enthaltenen Element entfernen, 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 für ein Element mit fester Position (es wurde außerhalb der Grenzen des Seitenkörpers verschüttet, unabhängig von overflow:hidden). Das Platzieren in einem festen Container mit overflow:hidden Auf dem Container behebt das Problem.

3
Nick F

Ich hatte ein ähnliches, recht komplexes Problem mit einem fließenden Layout, bei dem die rechte Spalte eine feste Breite und die linke eine flexible Breite hatte. Mein fester Container sollte die gleiche Breite wie die flexible Säule haben. Hier ist meine Lösung:

[~ # ~] 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%;
}

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

0