Div位置不能与任何值设置一起工作

Div position not working with any value settings

本文关键字：设置 一起 工作 任何值 位置 不能 Div      更新时间：2023-09-26

正文中有一个主div集的gmap，如下所示。然后在javascript中，我们添加了一个新的div，如下所示。问题是，div与表保持出现在页面的左上角，永远不会去任何其他位置，即使我试图改变document.getElementById("auto").style.top="35px";和document.getElementById("auto").style.left="35px";的值

var contents = document.createElement("div");
contents.style.width="300px";
contents.style.height="100px";
var htmlString = '<table style="background-color: #ffffff;">'r'n';
htmlString += '<tr><td>Name</td><td valign="top"><input id="nm" type="text" style="width:100%" value=""></td></tr>'r'n';
htmlString += '<tr><td>Description</td><td valign="top"><input id="desc" type="text" style="width:100%" value=""></td></tr>'r'n';
htmlString += '<tr><td>Client</td><td valign="top">'+clientList+'</td></tr>'r'n';                          
htmlString += '<tr>'r'n';
htmlString += '<td>&#160;</td><td><input type="button" value="Save" onclick="editFeature(''Point'')"> <input type="button" value="Cancel" onclick="saveFeatureCancel()"></td>'r'n';
htmlString += '</tr>'r'n';
htmlString += '</table>'r'n';               
contents.innerHTML="<form name='form2' id='form2' onsubmit='javascript:codeAddress();return false;'><div id='auto' style='z-index:5; position:relative'>"+htmlString+"</div></form>";
document.getElementById('map').appendChild(contents);
document.getElementById("contents").style.position="relative";
document.getElementById("auto").style.top="35px";
document.getElementById("auto").style.left="35px";

正文的主代码

<body>
  <div id="map">
  </div>
</body>

您从未将"contents" DOM元素的id设置为"contents"。简单修复，只添加这(最后)行。

var contents = document.createElement("div");
contents.style.width="300px";
contents.style.height="100px";
contents.id = 'contents';

这是我的jsFiddle

您正在为id为'auto'而不是'map'的元素设置top和left

所以你可能需要使用

document.getElementById("map").style.position="absolute";或document.getElementById("map").style.position="fixed";

和

document.getElementById("map").style.top="35px";
document.getElementById("map").style.left="35px";

这里有几个问题。参考工作jsFiddle: http://jsfiddle.net/7hzct/1/

首先，您应该(从您的评论中似乎已经注意到)将位置设置为absolute，而不是relative。

接下来，将div#contents添加到div#map。从你的评论看来，你想把它添加到正文(旁边的#map):

document.body.appendChild(contents);

此外，您正在为#auto设置top和left坐标，您希望使用bottom和right并为#contents设置它们:

document.getElementById("contents").style.position="absolute";
document.getElementById("contents").style.bottom="35px";
document.getElementById("contents").style.right="35px";

我没有碰你的html字符串，但它是相当可怕的阅读- 不要使用内联CSS这么多!。此外，自HTML 4.01以来，valign已被弃用。

相关文章：