it-swarm.com.de

CSS: How to have position: absolute div innerhalb einer Position: relative div nicht durch einen Überlauf beschnitten werden: versteckt auf einem Container

Ich habe 3 Ebenen von div:

  • (In grün darunter) Eine oberste Ebene div mit overflow: hidden. Dies liegt daran, dass ich möchte, dass Inhalte (hier nicht gezeigt) in dieser Box beschnitten werden, wenn sie die Größe der Box überschreiten.
  • (In rot unten) Darin habe ich div mit position: relative. Die einzige Verwendung dafür ist für das nächste Level.
  • (In blau unten) Endlich ein div, das ich mit position: absolute Aus dem Flow herausnehme, das ich aber relativ zum roten div positionieren möchte (nicht zur Seite).

Ich möchte, dass die blaue Box aus dem Fluss genommen und über die grüne Box hinaus erweitert wird, aber relativ zur roten Box positioniert wird, wie in:

Mit dem folgenden Code erhalte ich jedoch:

Wenn Sie das position: relative In der roten Box entfernen, kann die blaue Box nun aus der grünen Box herauskommen, ist aber nicht mehr relativ zur roten Box positioniert:

Gibt es einen Weg zu:

  • Behalten Sie den overflow: hidden In der grünen Box.
  • Ist das blaue Kästchen über das grüne Kästchen hinaus erweitert und relativ zum roten Kästchen positioniert?

Der vollständige Quellcode mit Inline-CSS zum Testen:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <body>
        <br/><br/><br/>
        <div id="1" style="overflow: hidden; background: #efe; padding: 5px; width: 125px">
            <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>
    </body>
</html>
129
avernet

Ein Trick, der funktioniert, besteht darin, Feld 2 mit position: absolute Anstelle von position: relative Zu positionieren. Wir setzen normalerweise einen position: relative Auf eine äußere Box (hier Box # 2), wenn eine innere Box (hier Box # 3) mit position: absolute Relativ zur äußeren Box positioniert werden soll. Aber denken Sie daran: Damit Box Nr. 3 relativ zu Box Nr. 2 positioniert werden kann, muss Box Nr. 2 nur 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 Details dazu hinzugefügt auf Absolut positioniertes Kästchen in einem Kästchen mit Überlauf: automatisch oder versteckt .

48
avernet

Es gibt keine magische Lösung, etwas außerhalb eines versteckten Überlaufbehälters anzuzeigen.

Ein ähnlicher Effekt kann erzielt werden, wenn Sie ein absolut positioniertes Div haben, das der Größe seines übergeordneten Elements entspricht, indem Sie es in Ihrem aktuellen relativen Container positionieren (das Div, das Sie nicht schneiden möchten, sollte sich außerhalb dieses Div befinden):

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

Beachten Sie, dass Sie overflow-x: hidden Verwenden können, wenn Sie nur Inhalte auf der x-Achse ausschneiden müssen (was anscheinend der Fall ist, da Sie nur die Breite des Div festgelegt haben).

5
vise

Ich sehe keinen Weg, dies so zu tun, wie es ist. Ich denke, Sie müssen möglicherweise den overflow:hidden Aus Teil 1 entfernen und einen weiteren Teil in Teil 1 hinzufügen (dh als Geschwister zu Teil 2), um Ihren nicht angegebenen 'Inhalt' zu speichern und den overflow:hidden stattdessen dazu. Ich denke nicht, dass Überlauf überrannt werden kann (oder sollte).

0
graphicdivine

Wenn andere Inhalte nicht in der Outer-Div angezeigt werden (das grüne Kästchen), warum sollten diese Inhalte nicht in eine andere Div eingeschlossen werden? Nennen wir sie "content". Haben Sie den Überlauf auf diesem neuen inneren Div versteckt, aber lassen Sie den Überlauf auf der grünen Box sichtbar.

Der einzige Haken ist, dass Sie dann herumspielen müssen, um sicherzustellen, dass der Inhalt div die Positionierung der roten Box nicht beeinträchtigt, aber es klingt, als ob Sie das mit wenig Kopfschmerzen beheben können sollten.

<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>
0
Anthony