Javascript绝对定位

Mik*_*ole 8 javascript layer

我正在尝试使用JavaScript创建一个新的div层,可以在页面加载后完全定位在页面上.

我的代码如下:

<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>
Run Code Online (Sandbox Code Playgroud)

该页面可以在这里看到.

我遇到的问题是div位于原始主体内容之后而不是在新层上.我该如何解决这个问题?

Arn*_*anc 17

试试这个:

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);
Run Code Online (Sandbox Code Playgroud)

它不起作用的原因是你使用xycss属性(不存在)而不是lefttop.此外,对于左侧,顶部,宽度,高度,您必须指定一个单位(例如px像素).