Javascript绝对定位
Javascript绝对定位
提问于 2011-01-27 18:08:32
我正在尝试使用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位于原始正文内容之后，而不是在新的层上。我该如何解决这个问题呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-01-27 18:13:12
试着这样做：
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 )。
Stack Overflow用户
发布于 2011-01-27 18:23:36
试试这些，
- 使用顶部和左侧而不是x和y来设置位置。
- 绝对定位的元素需要包含在也具有位置样式的元素中。常用的技巧是使用position: relative创建一个容器。
- 您应该使用+‘px’设置样式，如宽度、高度、顶部、左侧等。
- 您不需要为div设置display: block，因为它已经是一个块元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4814997
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号