是否可以将绝对定位的元素对齐在彼此之下？

Question

我有这个div:

<div class="member">
    <div class="memberImage"><img src="" /></div>
    <div class="memberInfo">John Doe</div>
</div>

这是它的css:

.member {
    width:200px;
    clear:both;
    position:absolute;
    padding:5px;
}

当我在这个下面复制这个div时,由于它的原因,它们似乎是一个在另一个上面position:absolute.

是否有可能position:absolute像往常一样将它们保持在另一个之下？

谢谢,

Answer 1

是否有可能保持 position:absolute 并让它们像往常一样低于另一个？

简单的回答：没有。

可能的解决方案：

• top向成员类添加属性并为每个成员递增
• 不要使用绝对定位（在这种情况下可能是最明智的）

从您要创建成员列表的代码片段来看。一个很适合这个的简单模式就是一个UL（无序列表）：

<ul class="memberlist">
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
    <li>
        <div class="memberImage"><img src="foo.jpg" /></div>
        <div class="memberInfo">John Doe</div>
    </li>
</ul>

以及与之配套的相应 CSS：

.memberlist li {
    width: 200px;
    padding: 5px;
    margin-bottom: 10px;
}