Html 拥有固定位置的空间？

我想创建与stackoverflow上相同的橙色图标，但我对css有问题。我不知道如何在其他页面上不包含信息。在stackoverflow上，橙色消息在页面上有自己的空间（与messages==1或messages==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;
}

一


二


三
AAAA



一
BBB
.家{
宽度：400px；
高度：200px；
背景色：#f4f28d；
}
.标志{
宽度：自动；
高度：100px；
背景颜色：蓝色；
字号：80px；
}
.留言{
宽度：400px；
背景颜色：橙色；
边框：实心1px黑色；
位置：固定；
}

JSFIDDLE：

编辑： 。消息必须是固定的-我想看看这也是如果页面滚动

---

如果消息必须固定在页面顶部，恐怕唯一的解决办法是使用

位置：相对

并在滚动页面时使用一些Javascript来移动条您可以看到一个Mootools示例，但是您可以使用jQuery或纯Javascript获得相同的结果

---

如果要避免使用Javascript，必须在页面呈现之前知道消息栏的高度。因此，假设该条为60px高，您可以将该条放置在家中

之外，然后应用

填充顶部：60px

（或

页边距顶部：60px；

）的

div.home

。您可以看到结果，只需将位置固定在0,0，然后在页面顶部添加一些边距，边距是根据每条消息的高度乘以消息的数量计算得出的：

如果您希望在服务器端实现更“动态”的功能，而无需计算，则可以使用javascript计算消息的高度，然后将其注入适当的位置：

---

洛伦佐答案的扩展。我试图完成一些类似的事情，并使用

$（window.scroll（）

的处理程序相对定位元素。建议填充到固定元素高度的解决方案的问题在于，实际高度通常在加载时未知，例如当元素是包含图像元素或将动态添加的元素的div时。建议克隆的解决方案存在的问题是，您必须小心更改ID，有时当它们用作选择器时，您不希望使用相同的类名，因此您最终会在更改ID和类时遍历dom，而您的css会被别名弄得乱七八糟。因此，为了完成与

位置相同的操作：固定
，同时仍占用文档中的原始空间（流）：

位置：相对
。将要随页面移动的元素的位置设置为相对
$（窗口）.scroll（）处理程序
。为window.scroll实现一个处理程序
当页面在滚动处理程序中滚动时，计算并移动元素。比如：

$element
    .stop()
    .animate( { 'top': distance }, { "duration": 500, "easing": "easeInOutQuart" } );


在（我认为）类似的情况下，修复第一个div（如导航栏）避免让下一个div部分（在我的情况下，部分）隐藏在第一个div下，我发现了以下解决方案：
我将第一个div设置为“position:sticky；top:0px”，这样第一个div就像固定在顶部一样（我的意图），但空间仍然“被占用”。
很有魅力。
我不确定我是否理解这个问题。是否希望橙色条不覆盖页面的其余部分？比如？是的，但是。消息必须总是在屏幕上。你的Javascript解决方案比我的要好：）我添加了关闭消息和动态更新偏移量的功能：（如果禁用JS，它也会优雅地后退）