絕對位置問題

當我嘗試將元素設置爲靜態html文本時，一切正常，但是當我嘗試將元素放入運行時（服務器中的數據數組）時，我的問題定位爲absolute。最簡單的例子來再現絕對位置問題

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Positioning</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <style type="text/css"> 
     body { font-family: Verdana, Tahoma, sans-serif; font-size: 14px } 
     div { border: 1px solid black } 
     .div5 { float: left; width: 300px; height: 300px; } 
     .div6 { width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; background-color: #F5D8C1 } 
     .div9 { width: 20px; height: 20px; position: absolute; bottom: 20px; left: 20px; background-color: #D8F5C1 } 
    </style> 
</head> 
<body> 
    <div id="content"></div> 
    <script type="text/javascript" language="JavaScript"> 
     function setDivValue($divId, $value) 
     { 
      var divL = document.getElementById($divId); 
      if (divL) 
       divL.innerHTML = $value; 
     } 

     var rtext = "<h1>Position absolute test</h1>"; 
     for (var i = 0; i < 10; i++){ 
      rtext += "<div class='div5' id='" + i + "'>" + 
          "<div class='div6'>div6</div>" + 
          "<div class='div9'>div9</div>" + 
         "</div>"; 
     } 
     setDivValue("content", rtext); 
    </script> 
</body> 
</html>

它放置DIV6和div9不是由父元素DIV5，但定位於窗口在兩個FF 20和IE 8（使之不瀏覽器相關的bug看來）。

可以解決嗎？我需要將圖片放在div6上，並將文本放在圖片的左上角（裏面）的div9上。

來源

2013-05-13 user2091150

如果創建的jsfiddle文件，它會變得容易幫助你。 – 2013-05-13 18:09:12

JsFiddle迫使我拆分所有東西（html，css，js），當我這樣做時什麼也沒有。 – user2091150 2013-05-13 18:26:38

讓它是這樣的。至少我們可以看到代碼。 – 2013-05-13 18:31:14

嘗試添加這些CSS：

#content{position:relative;}

來源

2013-05-13 17:58:22

現在，div6和div9類型的所有10個元素都位於頁面頂部，而不是位於每個10個div5之內，應該由位於絕對位置的doc處理 - 定位到父元素。 – user2091150 2013-05-13 18:12:58

'position：relative;'的想法很好，除了它應該設置爲'div5'（div6和div9的父元素）。我會設置爲答案，你可以改變你的帖子:) – user2091150 2013-05-13 19:49:21

絕對位置問題

回答

相關問題