CSS-Overflow mit absoluter Position versteckt

Ich habe mir diesen Kopf geschlagen. Ich möchte ein Bild absolut positionieren, dass ich mich in einem div bewegen werde und alles, was sich außerhalb des div erstreckt, beschneiden soll. Hier ist ein Beispiel für das Problem:CSS-Overflow mit absoluter Position versteckt

<html> 
<body> 
    <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

Also möchte ich die rechte Kante des Logos nicht anzeigen. Ideen?

Quelle

2010-07-11 David A

Da der Behälter Bild absolut positioniert ist, es ist außerhalb der Strömung des "enthält" div.

Ihre Entscheidungen sind auf jeder Position relativ oder die Abmessungen der absolut positionierten div, dynamisch mit jQuery, einzustellen.

Quelle

2010-07-12 00:13:11

OK, ich hatte Angst davor. Vielen Dank! –

Hm was ist mit diesem Beispiel '

' gibt es einen Grund für das Innere Div nicht zu verbergen. Dieses Verhalten in Safari für Windows und Opera ist aufgetreten. – Olga

Dies ist nicht korrekt. Überlauf hinzufügen: versteckt; zu Ihrem Eltern-Container wird das absolut positionierte Element darin nicht nach außen zeigen. –

Versuchen Sie position: relative zu Ihrem äußeren div. Hinzuzufügen. Dadurch wird das Bild relativ zu diesem div positioniert (anstelle des Überlaufstils) und nicht relativ zur Seite.

Beispiel:

<html> 
<body> 
    <div style="position: relative; width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

es Siehe auf JS Bin

Quelle

2010-07-12 00:10:53

Aber dann ist es nicht mehr relativ zur Seite positioniert. –

Wenn das Bild sich im div bewegen soll, warum sollte es relativ zur Seite sein? Vielleicht vermisse ich etwas. –

Danke Mann, du hast meinen Tag gerettet :) – user2972061

Verschieben Sie die absolute Position zum Bild und fügen Sie dann den relativen Wert zum übergeordneten Container hinzu. Arbeitete für mich in einer ähnlichen Situation.

<html> 
<body> 
    <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;"> 
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div> 
    <div style="position: relative; overflow:hidden;"><img style="position: absolute; top: 10px; left: 250px; z-index: -1;" src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div> 
    </div> 
</body> 
</html>

Quelle

2014-02-06 04:22:31 christoshrousis

CSS-Overflow mit absoluter Position versteckt

Antwort

Verwandte Themen