Div con desplazamiento y contenido con posiciones absolutas

Question

Tengo un "div" con estilo: overflow-y: scroll; overflow-x: auto; Intento agregar dinámicamente la imagen dentro de este "div" con posición absoluta o relativa. Todo parece estar bien hasta que el usuario intente desplazarse por el contenido "div": la imagen permanece en una posición fija con respecto a la ventana del navegador. Este problema parece ser solo en IE (7), en firefox todo está bien. ¿Hay alguna solución para esto?

EDITAR (en respuesta a las preguntas planteadas a continuación): estoy posicionando el elemento porque lo necesito para mostrar delante de otro elemento.

Answer 1

¿Hay alguna razón particular por la que deba establecer una posición para la imagen? Funciona bien en IE7 sin establecer una posición.

<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div> 

Answer 2

No sé si es un error o una "característica" en IE, pero me he encontrado con lo mismo antes. Afortunadamente hay una solución fácil. Simplemente agregue "position:relative" al <div> que tiene contenido desplazable.

Answer 3

significa que el elemento se mostrará en relación con la esquina superior izquierda del puerto de visualización. Usar relative en su lugar significa que los valores que usa para left y top se agregarán a donde hubiera estado normalmente el img.

Answer 4

Debe utilizar la posición relativa si desea que se pueda desplazar. El truco es usar posicionamiento negativo en el segundo elemento.

Digamos que usted tiene dos elementos A y B, y desea a la posición B frente a A. Se vería algo como esto:

<div id="A" style="position:relative; width:300px; height=240px;">Element A</div> 

<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div> 

En función del contenido, es posible que tenga que añadir adicional estilos como "display: block;" etc. Un buen recurso para éstos es w3schools.com

Para un buen tutorial sobre el posicionamiento con CSS DIV ir a:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Saludos

Answer 5

Usted sabe qué, que sólo podría ser más fácil para envolver los elementos posicionados absolutos en un elemento de contenedor relativamente posicionado, creo que debería poder desplazarse ...

Answer 6

Ajustar todo en un div que se coloca relativamente en la página:

<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;"> 
    <br /> 
    <img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" /> 
    <br /> 
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;"> 
     <br />[scrolling content]<br /> 
    </div> 
    <br /> 
</div> 

Answer 7

cosas que he aprendido de la manera difícil: Para IE6/IE7 se puede necesitar tener la imagen como el último elemento DOM en el DIV que contiene conseguir que aparezca en el DIV desplazamiento.

Answer 8

Try float:left o float:right con margin

me dio la misma edición en cromo con position:absolute en un overflow-y: auto;. Los divs fueron arreglados en sus posiciones, mientras se desplazaban.

Y una solución simple es usar flotador.

mi viejo código era-

position:absolute; right:10px; 

y reemplazado por el siguiente y worked-

float:right; margin-right:10px;