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位置不適用於任何值設定

回答

相關問題