Javascript Absolute Positioning

Sto provando a creare un nuovo livello div utilizzando JavaScript che può essere posizionato in modo assoluto nella pagina dopo il caricamento della pagina.Javascript Absolute Positioning

Il mio codice è il seguente:

<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 pagina può essere visto here.

Il problema che sto avendo è che il div è seduto dopo il contenuto del corpo originale piuttosto che su di esso su un nuovo livello. Come posso rimediare a questo?

fonte

2011-01-27 Mike Poole

prova con questo, invece:

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 ragione per cui non funzionava è che si è utilizzato x e y proprietà CSS (che non esistono), invece di left e top. Inoltre, per left, top, width, height hai dovuto specificare un'unità (ad esempio px per pixel).

fonte

2011-01-27 10:13:11 arnaud576875

Grazie. Come puoi immaginare, sono più abituato alla sintassi di altre lingue. Funziona bene ora. –

Prova questi,

Impostare la posizione utilizzando in alto ea sinistra, piuttosto che xe y.
Un elemento posizionato in modo assoluto deve essere contenuto all'interno di qualcosa che abbia anche uno stile di posizione. Il solito trucco è creare un contenitore con posizione: relativo.
Dovresti impostare stili come larghezza, altezza, in alto, a sinistra ecc. Con + 'px'.
Non è necessario impostare display: blocco per div in quanto è già un elemento di blocco.

fonte

2011-01-27 10:23:35 leebriggs

# 2 Non vero. La 'posizione' del suo genitore determina solo come verranno decise le coordinate. – kapa

Javascript Absolute Positioning

risposta

Problemi correlati