Javascript绝对定位答案

【问题标题】：Javascript Absolute PositioningJavascript绝对定位
【发布时间】：2011-06-16 10:41:33
【问题描述】：

我正在尝试使用 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 位于原始正文内容之后，而不是在新图层上。我该如何解决这个问题？

【问题讨论】：

标签： javascript layer

【解决方案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 用于像素）。

【讨论】：

谢谢。正如您可能猜到的那样，我更习惯于其他语言的语法。它现在运行良好。

【解决方案2】：

试试这些，

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

【讨论】：

#2 不正确。其父级的position 仅决定如何确定坐标。