繁体   English   中英

Javascript绝对定位

[英]Javascript Absolute Positioning

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

该页面可以在这里看到。

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

试试这个:

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);

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

试试这些,

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM