CSS: Wie Lage hat: absolute div in einer position: relative div nicht durch einen Überlauf abgeschnitten werden: auf einem Container versteckt

StackOverflow https://stackoverflow.com/questions/2243245

  •  19-09-2019
  •  | 
  •  

Frage

Ich habe 3 Ebenen div:

  • (grün unten) Ein Top-Level-div mit overflow: hidden. Das ist, weil ich einige Inhalte (hier nicht dargestellten) will innerhalb dieses Feldes abgeschnitten, wenn sie die Größe der Box überschreiten.
  • (rot unten) Innerhalb dieses, ich habe div mit position: relative. Die einzige Verwendung dafür ist für die nächste Ebene.
  • (in blau unten) Endlich ein div I der Strömung mit position: absolute nehmen aber, dass ich will relativ positioniert den roten div (nicht auf der Seite).

Ich mag die blaue Box habe die Strömung herausgenommen wird und über die grüne Box zu erweitern, aber seine relativ zu dem roten Feld wie in:

Doch mit dem Code unten, erhalte ich:

Und das Entfernen der position: relative auf dem roten Kasten, jetzt die blaue Box darf der grünen Box raus, ist aber nicht mehr relativ positioniert roten Feld:

Gibt es eine Möglichkeit an:

  • Halten Sie die overflow: hidden auf dem grünen Feld.
  • Haben Sie das blaue Feld über die grüne Box erweitern und sein relativ zu roten Kasten?

Die vollständige Quelle: 

#d1 {
  overflow: hidden;
  background: #efe;
  padding: 5px;
  width: 125px;
}

#d2 {
  position: relative;
  background: #fee;
  padding: 2px;
  width: 100px;
  height: 100px;
}

#d3 {
  position: absolute;
  top: 10px;
  background: #eef;
  padding: 2px;
  width: 75px;
  height: 150px;
}
<br/><br/><br/>
<div id="d1" >
  <div id="d2" >
    <div id="d3"></div>
  </div>
</div>

War es hilfreich?

Lösung

Ein Trick, dass die Arbeiten an Position box # 2 mit position: absolute statt position: relative. Wir haben in der Regel eine position: relative auf einer äußeren Box (hier box # 2), wenn wir eine innere Box wollen (hier box # 3) mit position: absolute mit dem äußeren Feld relativ zu positionieren. Aber denken Sie daran: für Feld # 3 relativ zu werden # 2 Box, Box # 2 gerade Bedarf positioniert werden. Mit dieser Änderung erhalten wir:

Und hier ist der vollständige Code mit dieser Änderung: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css">

            /* Positioning */
            #box1 { overflow: hidden }
            #box2 { position: absolute }
            #box3 { position: absolute; top: 10px }

            /* Styling */
            #box1 { background: #efe; padding: 5px; width: 125px }
            #box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
            #box3 { background: #eef; padding: 2px; width: 75px; height: 150px }

        </style>
    </head>
    <body>
        <br/><br/><br/>
        <div id="box1">
            <div id="box2">
                <div id="box3"/>
            </div>
        </div>
    </body>
</html>

Ich habe weitere Informationen dazu auf Absolut positionierte Box in einer Box mit Überlauf. auto oder versteckt

Andere Tipps

Es gibt keine magische Lösung, etwas außerhalb eines Überlauf versteckt Behälter darstellen kann.

Ein ähnlicher Effekt kann durch, die ein absolutes positioniert div erreicht wird, dass die Größe der Mutter entspricht, indem sie es in Ihrem aktuellen relativen Behälter zu positionieren (das div Sie Clip nicht wünschen, sollte außerhalb dieser div sein): 

#1 .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

im Kopf Nehmen Sie, dass nur Inhalte auf der x-Achse zu befestigen haben (die Ihr Fall zu sein scheinen, da Sie nur die Breite des div eingestellt haben), können Sie overflow-x: hidden verwenden.

Ich sehe nicht wirklich einen Weg, dies zu tun, wie sie ist. Ich glaube, Sie müssen möglicherweise die overflow:hidden von div # 1 und fügen Sie ein weiteres div innerhalb div # 1 (dh als Geschwister zu div # 2) entfernen Ihre unspecified ‚Inhalt‘ zu halten und die overflow:hidden zu dieser Stelle hinzufügen. Ich glaube nicht, dass Überlauf sein kann (oder sollte sein können) über ein geschüttelten.

Wenn es andere Inhalte innerhalb des Außen-div (die grüne Box) nicht dargestellt ist, warum nicht, dass der Inhalt in einem anderen div gewickelt haben, nennen wir es "content". Habe Überlauf versteckt auf diesem neuen Innen div, aber halten Überlauf sichtbar auf dem grünen Feld.

Der einzige Haken ist, dass Sie dann zu verwirren haben um sicher zu stellen, dass der Inhalt div nicht mit der Positionierung des roten Feldes nicht stört, aber es klingt wie soll es möglich sein, dass mit wenig Kopfschmerzen zu beheben. 

<div id="1" background: #efe; padding: 5px; width: 125px">
    <div id="content" style="overflow: hidden;">
    </div>
    <div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
        <div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
    </div>
</div>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top