JavaScript Bezwzględne pozycjonowanie

Próbuję utworzyć nową warstwę div za pomocą JavaScript, który może być bezwzględnie umieszczony na stronie po wczytaniu strony.JavaScript Bezwzględne pozycjonowanie

Mój kod wygląda następująco:

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

Strona widać here.

Problem, który mam, polega na tym, że div siedzi za oryginalną treścią ciała, a nie nad nową warstwą. Jak mogę temu zaradzić?

Źródło

2011-01-27 Mike Poole

Spróbuj z tym zamiast:

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

Powód to nie działa jest to, że stosowane x i y właściwości CSS (które nie istnieją) zamiast left i top. Również dla lewej, góry, szerokości i wysokości trzeba było określić jednostkę (np. px dla pikseli).

Źródło

2011-01-27 10:13:11 arnaud576875

Dzięki. Jak można się domyślić, jestem bardziej przyzwyczajony do składni innych języków. Działa teraz ładnie. –

Spróbuj nich

Ustaw pozycję używając górnej i lewej zamiast xi y.
Element pozycjonowany absolutnie musi znajdować się wewnątrz czegoś, co również ma styl pozycji. Najczęstszą sztuczką jest utworzenie kontenera z pozycją: względna.
Powinieneś ustawić style takie jak szerokość, wysokość, góra, lewo itp. Z + 'px'.
Nie trzeba ustawiać wyświetlania: blok dla elementu div, ponieważ jest już elementem bloku.

Źródło

2011-01-27 10:23:35 leebriggs

# 2 Nie prawda. "Pozycja" tego rodzica określa tylko, jak zostaną ustalone współrzędne. – kapa

JavaScript Bezwzględne pozycjonowanie

Odpowiedz

Powiązane problemy