html - 固定位置的自己的空间？

Question

我想创建与在 stackoverflow 上相同的内容 - 橙色通信，但我对 css 有疑问。我不知道如何让其他页面不被消息覆盖。在 stackoverflow 上，橙色消息在页面上有自己的空间(就像消息 == 1 或消息 == 5 一样)- 我该怎么做？

<div class="home">
    <div class="message">one
        <br />
        two
        <br />
        three
    </div>
    <div class="logo">AAAA</div>
</div>
<br /> <br />
<div class="home">
    <div class="message">one

    </div>
    <div class="logo">BBB</div>
</div>

.home {
    width: 400px;
    height: 200px;
    background-color: #f4f28d;
}

.logo {
    width: auto;
    height: 100px;
    background-color: blue;
    font-size: 80px;
}

.message {
    width: 400px;
    background-color: orange;
    border: solid 1px black;
    position: fixed;
}

JSFIDDLE:http://jsfiddle.net/JzUsG/

编辑:.message 必须修复 - 如果页面正在滚动，我也想看看这个

http://jsfiddle.net/VnbZf/1/

Answer 1

只需将位置固定在 0,0，然后在页面顶部添加一些边距，该边距是根据每条消息的高度乘以消息数计算得出的:

http://jsfiddle.net/C8uBS/

如果你想要在服务器端不需要计算的更“动态”的东西，你可以用 javascript 计算消息的高度，然后将其注入(inject)到适当的位置:

http://jsfiddle.net/kGXnZ/