Question

我正在尝试使用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>

可以看到该页面here。

我遇到的问题是div位于原始正文内容之后，而不是位于新图层上。我该如何解决这个问题？

Answer 1

请尝试使用此功能：

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

Answer 2

试试这些，

使用顶部和左侧而不是x和y设置位置。
绝对定位元素需要包含在也具有位置样式的内容中。通常的技巧是创建一个位置为relative的容器。
您应该使用+'px'设置宽度，高度，顶部，左侧等样式。
您不需要为div设置display：block，因为它已经是一个块元素。

Javascript绝对定位

2 个答案: