Javascript Posicionamiento absoluto

Estoy tratando de crear una nueva capa div usando JavaScript que se puede colocar completamente en la página después de cargar la página.Javascript Posicionamiento absoluto

Mi código es el siguiente:

<html><head> 
<script type="text/javascript"> 
function showLayer() { 
var myLayer = document.createElement('div'); 
myLayer.id = 'bookingLayer'; 
myLayer.style.position = 'absolute'; 
myLayer.style.x = 10; 
myLayer.style.y = 10; 
myLayer.style.width = 300; 
myLayer.style.height = 300; 
myLayer.style.padding = '10px'; 
myLayer.style.background = '#00ff00'; 
myLayer.style.display = 'block'; 
myLayer.style.zIndex = 99; 
myLayer.innerHTML = 'This is the layer created by the JavaScript.'; 
document.body.appendChild(myLayer); 
} 
</script> 
</head><body bgcolor=red>This is the normal HTML content. 
<script type="text/javascript"> 
showLayer(); 
</script> 
</body></html>

La página se pueden ver here.

El problema que estoy teniendo es que el div está sentado después del contenido del cuerpo original en lugar de sobre una nueva capa. ¿Cómo puedo remediar esto?

Fuente

2011-01-27 Mike Poole

intento con esto en su lugar:

var myLayer = document.createElement('div'); 
myLayer.id = 'bookingLayer'; 
myLayer.style.position = 'absolute'; 
myLayer.style.left = '10px'; 
myLayer.style.top = '10px'; 
myLayer.style.width = '300px'; 
myLayer.style.height = '300px'; 
myLayer.style.padding = '10px'; 
myLayer.style.background = '#00ff00'; 
myLayer.innerHTML = 'This is the layer created by the JavaScript.'; 
document.body.appendChild(myLayer);

La razón por la que no estaba funcionando es que utilizó x y y propiedades CSS (que no existen) en lugar de left y top. Además, para izquierda, arriba, ancho y alto, debe especificar una unidad (por ejemplo, px para píxeles).

Fuente

2011-01-27 10:13:11 arnaud576875

Gracias. Como posiblemente pueda adivinar, estoy más acostumbrado a la sintaxis de otros idiomas. Está funcionando bien ahora. –

Pruebe estos,

Ajuste la posición usando la parte superior ya la izquierda en lugar de x e y.
Un elemento de posición absoluta necesita estar dentro de algo que también tenga un estilo de posición. El truco habitual es crear un contenedor con posición: relativa.
Debería establecer estilos como ancho, alto, arriba, izquierda, etc. con + 'px'.
No es necesario configurar la pantalla: bloquear para el div ya que es un elemento de bloque.

Fuente

2011-01-27 10:23:35 leebriggs

# 2 No es cierto. La 'posición' de su padre solo determina cómo se decidirán las coordenadas. – kapa

Javascript Posicionamiento absoluto

Respuesta

Cuestiones relacionadas