Question

根据我的知识，绝对定位元素和浮动元素将从正常的html流中删除（如果我错了，请纠正我）。

这是我的jsFiddle

这是我的代码：

<header> </header>
<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area"></div>
<div class="right-sidebar"></div>
</div>
<footer> </footer>

我的css：

.content-area {
position: relative;
min-height: 310px;
background-color: #bbb;
}
.left-sidebar {
position:absolute;
float: left;
width: 50px;
height: 100%;
background-color: #abcdef;
}
.right-sidebar {
position: absolute;
right: 0;
width: 50px;
height: 100%;
background-color: #abcdef;
}

当我在main-area内写任何内容时，为什么右侧边栏会向下滑动。

Answer 1

将top属性添加到侧栏

.right-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

当指定位置absolute时，您需要定位元素，这意味着您必须将其top，bottom，left和right属性设置为你想要的价值观。如果未设置其中一个属性，浏览器将对其进行定位，因为它们将设置为auto。

Answer 2

正如他们告诉你的那样，请top:0来修复它。

好的，原因是：

点击此链接：http://dev.w3.org/csswg/css-position/#abs-non-replaced-height

您正在寻找的部分是第二条规则:(强调我加入）

如果'top'和'bottom'是'auto'且'height'不是'auto'，那么设置 “顶部”到静态位置，然后求解“底部”。

这就是原因。请注意， top默认为auto而不是0 。

Answer 3

将 top：0; 添加到右侧栏。在那之后它不应再推倒了。

刺激的定位行为：绝对

3 个答案: