Javascript绝对定位
Posted
技术标签:
【中文标题】Javascript绝对定位【英文标题】：Javascript Absolute Positioning 【发布时间】：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 位于原始正文内容之后，而不是在新图层上。我该如何解决这个问题？
【问题讨论】：
【参考方案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 仅决定如何确定坐标。以上是关于Javascript绝对定位的主要内容，如果未能解决你的问题，请参考以下文章