CSS: Wie man Position hat: absolutes Div innerhalb einer Position: relatives Div, das nicht durch einen Überlauf beschnitten wird: versteckt auf einem Container

143

Ich habe 3 Ebenen von div:

  • (In grün unten) Eine oberste Ebene divmit overflow: hidden. Dies liegt daran, dass einige Inhalte (hier nicht gezeigt) in dieser Box zugeschnitten werden sollen, wenn sie die Größe der Box überschreiten.
  • (In rot unten) Darin habe ich divmit position: relative. Die einzige Verwendung hierfür ist für das nächste Level.
  • (In blau unten) Zum Schluss a divnehme ich mit aus dem Fluss mit position: absoluteaber ich möchte relativ zum Rot positioniert werden div(nicht zur Seite).

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

Mit dem folgenden Code erhalte ich jedoch:

Wenn Sie das position: relativerote Kästchen entfernen , darf das blaue Kästchen nun aus dem grünen Kästchen herauskommen, befindet sich jedoch nicht mehr relativ zum roten Kästchen:

Gibt es einen Weg zu:

  • Halten Sie das overflow: hiddenauf der grünen Box.
  • Erweitert sich die blaue Box über die grüne Box hinaus und ist sie relativ zur roten Box positioniert?

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>
Erweitern Sie das Snippet

css overflow css-position Avernet
quelle
44
+1 für gut formatierte Frage und Quellcode
Graphicdivine
Klarstellung: Sie möchten also, dass die blaue Box (die innerste Abteilung) aus der grünen Box (die äußerste Abteilung) überlaufen kann, aber den Überlauf auf der grünen Box verborgen hält? Haben Sie also im Grunde genommen einen Überlauf an allem in der grünen Box versteckt, AUSSER an der blauen Box, stimmt das?
Anthony
Anthony, ja, genau das ist es. Und es ist mir egal, was mit der roten Box (Nr. 2) passiert, die nur dazu dient, die obere / rechte Seite der blauen Box (Nr. 3) zu beeinflussen.
Avernet
2
+1 für die richtige Erklärung einer Frage, die ich für zu schwer zu erklären hielt, auf die ich aber wirklich eine Antwort haben wollte.
Andrew Mao
position: fixedignoriert das overflow:hiddenvon jedem enthaltenden Element.
Kevin Beal

Antworten:

48

Ein Trick, der funktioniert, besteht darin, Box 2 mit position: absolutestatt zu positionieren position: relative. Normalerweise setzen wir eine position: relativeauf eine äußere Box (hier Box 2), wenn eine innere Box (hier Box 3) position: absoluterelativ 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>
Avernet
quelle
5
Ich habe es tatsächlich benutzt position: staticund das hat bei mir besser funktioniert
Jason
@ Jason, sehr interessant; Sie sagen also, dass Sie position: staticauf Box 2 anstelle von verwenden position: absolute.
Avernet
1
Können Sie näher erläutern, warum absolutenicht abgeschnitten wird, aber relativefunktioniert?
Andrew Mao
1
Diese Lösung funktioniert nur, wenn Sie alles zwischen # 1 und # 3 absolut machen. In der Praxis ist dies unmöglich.
Windmaomao
1
Ich frage mich,
5

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

Ein ähnlicher Effekt kann erzielt werden, indem 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 ausschneiden möchten, sollte sich außerhalb dieses Div befinden):

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

Denken Sie daran, dass Sie verwenden können, wenn Sie nur Inhalte auf der x-Achse ausschneiden müssen (was Ihr Fall zu sein scheint, da Sie nur die Breite des Divs festgelegt haben) overflow-x: hidden.

Schraubstock
quelle
0

Ich sehe keinen Weg, dies so zu machen, wie es ist. Ich denke, Sie müssen möglicherweise das overflow:hiddenvon div # 1 entfernen und ein weiteres div innerhalb von div # 1 hinzufügen (dh als Geschwister zu div # 2), um Ihren nicht spezifizierten 'Inhalt' zu speichern und overflow:hiddenstattdessen das hinzuzufügen . Ich denke nicht, dass Überlauf übersteuert werden kann (oder sollte).

Grafikgöttlich
quelle
0

Wenn im äußeren Div (dem grünen Kästchen) kein anderer Inhalt angezeigt wird, können Sie diesen Inhalt in einen anderen Div einbinden. Nennen wir ihn "content". Haben Sie einen Überlauf auf diesem neuen inneren Teil 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 Inhaltsbereich die Positionierung der roten Box nicht beeinträchtigt, aber es klingt so, als ob Sie dies 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>
Anthony
quelle