JavaScript絕對定位

我想創建一個新的div層，使用JavaScript，可以在頁面加載後絕對定位在頁面上。JavaScript絕對定位

我的代碼如下：

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

頁面可以看到here。

我遇到的問題是，div是在原始主體內容之後而不是在新層上。我該如何補救？

來源

2011-01-27 Mike Poole

嘗試用這個代替：

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

它不工作的原因是，您使用的x和y CSS屬性（不存在），而不是left和top。此外，對於左側，頂部，寬度和高度，您必須指定一個單位（例如像素爲px）。

來源

2011-01-27 10:13:11 arnaud576875

謝謝。正如你可能猜到我更習慣於其他語言的語法。它現在工作很好。 – 2011-01-27 11:09:20

嘗試這些，

使用頂端設置的位置，左，而不是x和y。
絕對定位的元素需要包含在也具有位置樣式的東西內。通常的技巧是創建一個位置爲相對的容器。
你應該用+'px'設置樣式，例如寬度，高度，頂部，左邊等。
您不需要爲div設置display：block，因爲它已經是一個塊元素。

來源

2011-01-27 10:23:35 leebriggs

＃2不正確。它的父母的「位置」只決定座標的決定方式。 – kapa 2011-01-27 10:28:22

JavaScript絕對定位

回答

相關問題