Desbordamiento de CSS oculto con la posición absoluta

He estado golpeando mi cabeza en este caso. Quiero posicionar de forma absoluta una imagen en la que me moveré en un div y quiero recortar cualquier cosa que se extienda fuera del div. Aquí hay un ejemplo del problema:Desbordamiento de CSS oculto con la posición absoluta

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

Por lo tanto, quiero que el borde derecho del logotipo no se muestre. Ideas?

Fuente

2010-07-11 David A

Desde contenedor de la imagen se coloca absolutamente, está fuera del flujo de la "que contiene" div.

Sus opciones son posicionar de forma relativa o ajustar las dimensiones del div completamente posicionado, dinámicamente, con jQuery.

Fuente

2010-07-12 00:13:11

OK, tenía miedo de eso. ¡Gracias! –

Hm qué pasa con este ejemplo '

' hay alguna razón para que el div interior no se oculte. Experimentar este comportamiento en Safari para Windows y Opera – Olga

Esto no es correcto. Agregar desbordamiento: oculto; a su contenedor principal hará que el elemento absolutamente posicionado dentro de él no se muestre afuera. –

Intente agregar position: relative a su div externo. Esto posicionará la imagen relativa a ese div (honrando el estilo de desbordamiento) en lugar de relativa a la página.

Ejemplo:

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

ve en JS Bin

Fuente

2010-07-12 00:10:53

Pero luego ya no está posicionado en relación con la página. –

Si se supone que la imagen "se mueve en el div", ¿por qué la quiere en relación con la página? Tal vez me estoy perdiendo algo. –

Gracias hombre que salvó mi día :) – user2972061

Mueva la posición absoluta a la imagen, luego agregue la relativa al contenedor principal. Trabajó para mí en una situación similar.

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

Fuente

2014-02-06 04:22:31 christoshrousis

Desbordamiento de CSS oculto con la posición absoluta

Respuesta

Cuestiones relacionadas