div - remove attribute javascript

Div con desplazamiento y contenido con posiciones absolutas

Question

Tengo un "div" con estilo: overflow-y: scroll; overflow-x: auto; 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 necesito que se muestre frente a otro elemento.

Answer 1

¿Hay alguna razón en particular por la que necesites 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

Cosas que aprendí de la manera difícil: para IE6 / IE7 puede necesitar tener la imagen como el último elemento DOM en el DIV que lo contiene para que aparezca sobre el DIV de desplazamiento.

Answer 3

Envuelva todo en un div que contiene 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 4

La position: absolute; declaración position: absolute; significa que el elemento se mostrará en relación con la esquina superior izquierda del puerto de visualización. Usar relative lugar significa que los valores que use para la left y la top se agregarán a donde la img debería haber sido normalmente.

Answer 5

Necesita usar posicionamiento relativo si desea que se pueda desplazar. El truco es usar posicionamiento negativo en el segundo elemento.

Digamos que tienes dos elementos A y B, y quieres ubicar a B en frente de A. Se vería más o menos así:

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

Dependiendo del contenido, puede que tenga que agregar estilos adicionales como "display: block;" etc. Un buen recurso para estos es w3schools.com

Para un buen tutorial sobre posicionamiento DIV con CSS, vaya a:

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

Aclamaciones

Answer 6

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 7

Ya sabes, podría ser más fácil envolver los elementos posicionados absolutos en un elemento contenedor relativamente posicionado, creo que debería poder desplazarse ...

Answer 8

Pruebe float:left o float:right con margin

Tengo el mismo problema en Chrome con la 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 reemplacé con lo siguiente y funcionó-

float:right; margin-right:10px;