Div位置不适用于任何值设定

我们在身体的主div设定如下。然后在JavaScript中，我们添加一个新的div如下。问题是，用表格不断出现在页面的左上角，从不给我，甚至如何努力改变document.getElementById("auto").style.top="35px";值的任何其他位置和document.getElementById("auto").style.left="35px";Div位置不适用于任何值设定

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>

来源

2013-03-06 biz14

这段代码有很多问题。为什么要动态地将它全部添加到开始？无论哪种方式，这里是一个jsFiddle的作品：jsfiddle.net/7hzct/1/ – 2013-03-06 16:55:58

@尼尔我应该解决的主要问题是什么？ – biz14 2013-03-06 17:03:52

你永远设置 “内容” DOM元素 “内容” 的ID。简单修复只需添加此（最后）行。

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

Here's my jsFiddle。

来源

2013-03-06 16:16:52 scottheckel

好的，我会添加该ID，但如何把它放在右下角？ – biz14 2013-03-06 16:19:36

查看jsFiddle的确切位置，但您只需在使用document.getElementById（'contents'）之前的某个时间点指定它即可。 – scottheckel 2013-03-06 16:20:45

我检查了jsFiddle你希望我分配的是什么点？我现在已经尝试过document.getElementById（“contents”）.style。位置=“绝对”; \t \t \t \t document.getElementById（“contents”）。style.top =“35px”; \t \t document.getElementById（“contents”）。style.left =“35px”;但是我应该怎么做才能把它带到底？ – biz14 2013-03-06 16:25:36

您正在设置top和left与ID，“汽车”而不是“地图”

所以元素，您可能必须使用，

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

和

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

来源

2013-03-06 16:14:49 madhushankarox

不是地图会留下我只是想改变的是内容div不是地图。 – biz14 2013-03-06 16:16:27

@ biz14：不清楚。抱歉! – madhushankarox 2013-03-06 16:19:28

地图div是持有地图的div。内容div将位于该地图的顶部。所以我希望内容div位于右下角。 – biz14 2013-03-06 16:21:29

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

首先，你应该（从你的意见，你已经注意到，似乎）将位置设置为absolute，而不是relative。

接下来，您正在将div#contents添加到div#map。它从你的意见，似乎想要将它添加到身体（旁边#map）：

document.body.appendChild(contents);

此外，您正在设置top和left坐标#auto，要使用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已被弃用。

来源

2013-03-06 17:00:50

@Neils是的，我已经把它设置为绝对不是相对的。不，我不想在#map旁边添加，但在顶部。我有这个工作，现在看到任何问题吗？。的document.getElementById（ '映射'）的appendChild（内容）; \t \t \t \t document.getElementById（“contents”）。style.position =“absolute”; \t \t \t \t document.getElementById（“contents”）。style.bottom =“100px”; \t \t document.getElementById（“contents”）。style.right =“ - 55px”; – biz14 2013-03-06 17:06:40

@ biz14对不起，这对我没有意义。你在说什么？ – 2013-03-09 20:34:12

Div位置不适用于任何值设定

回答

相关问题