绝对位置问题

当我尝试将元素设置为静态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

绝对位置问题

回答

相关问题