Is it possible to align absolute-positioned elements below eachother?

I have this div:

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

This is the css for it:

.member {
    width:200px;
    clea开发者_如何学编程r:both;
    position:absolute;
    padding:5px;
}

When I duplicate this div just beneath this one they appear to be one over the other because of the position:absolute.

Is it possible to keep the position:absolute and have them one below the other as normal?

Thanks,

Is it possible to keep the position:absolute and have them one below the other as normal?

Simple answer: no.

Possible solutions:

• Add a top attribute to the member class and increment for every member
• Don't use absolute positioning (probably wisest in this case)

Judging from your code snippet you want to create a memberlist. A simple pattern that would fit well for this is simply an UL (Unordered list):

<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>

And a corresponding CSS to go with it:

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

Is it possible to keep the position:absolute and have them one below the other as normal?

Well, uh, no, because position:absolute is designed to allow you to specify an absolute position for an element.

This means that it will default to the top-left corner of the element that it is absolutely positioned against, and can be positioned according to your requirements using top and left attributes (or bottom and right if you prefer).

You could specify the two elements to have specific top positioning so that they could appear one below the other, which would answer your question, but really what you're asking for isn't absolute positioning, so position:absolute is inappropriate.

You you probably want instead is position:relative, which works more like a normally positioned element, except that you can override it using top and left, etc. This would allow you to do what you want, so it sounds like the answer to your question.

Hope that helps.

Its because you have used class names, hence same style to both, so both have absolute position, you can either give them ids or use position: relative