Question

当我尝试将元素作为静态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上。

Answer 1

尝试添加这些CSS：

#content{position:relative;}

定位绝对问题

1 个答案: