1

我希望我的具有“非绝对”类的元素能够正常定位，因为它的兄弟姐妹元素将被定位为静态。现在，由于它的兄弟姐妹是绝对定位的，因此非绝对元素与绝对定位的元素重叠。

我该如何解决这个问题，以使元素占据其正常位置，所有它的兄弟姐妹都将被定位为静态？

<html>

<head>
    <style type="text/css">
        .world{width:1000px;position:relative;border:1px solid black;height:200px;}
        .world .child{position:absolute}
        .animal{left:0px;}
        .tree{left:200px;}
        .water{left:500px;}

        .not-absolute{position:relative;float:left}
    </style>
</head>
<body>
    <div class='world'>
            <div class='child animal'> Absolute</div>
            <div class='child tree'> Absolute</div>
            <div class='child water'>Absolute</div>
            <div class='not-absolute'>Not Absolute</div>
    </div>

</body>
</html>
4

1 回答 1

1

如果我猜对了，恐怕你是在要求不可能。当绝对定位时，元素会从流中移除，因此非绝对元素的正常位置也会发生变化。

是否可以设置 position:relative 当前绝对定位的元素？这将允许在流中保持非绝对元素位置。

您还可以尝试定位您的非绝对元素，或者将当前的 .child 绝对值保留为 position:static 并使用它们的 :before/:after 伪元素来完成这项工作。

于 2012-11-23T19:11:33.520 回答