定位的刺激行为：绝对[关闭]答案

【问题标题】：Irritating behaviour of positioning: absolute [closed]定位的刺激行为：绝对[关闭]
【发布时间】：2013-08-11 15:41:42
【问题描述】：

据我所知，绝对定位元素和浮动元素已从正常的 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 中写任何内容时，为什么右侧边栏会滑到下方。

【问题讨论】：

你不能浮动绝对元素，使用右或左
浮动绝对元素有什么好处？我可以使用left，right直接定位绝对元素
我没有关注您的问题？浮动绝对元素没有任何好处，因为它不工作
@DavidChase 哎呀！对不起，我读错了。

标签： html css css-position absolute

【解决方案1】：

将top 属性添加到侧栏

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

当指定位置absolute 时，您应该定位元素，这意味着您必须将其top、bottom、left 和right 属性设置为您想要的值。如果未设置这些属性之一，浏览器会定位它们，因为它们将被设置为auto。

【讨论】：

谢谢，但你能解释一下这种行为的原因吗？
我无法理解。你能详细说明一下吗？据我所知，使用绝对位置只需将块固定到相对于父 div 的指定位置（相对定位）。毕竟这是导致侧边栏向下滑动的原因
由于您没有将右栏设置为顶部：0；它只会迫使它拥抱 div 的右侧。如果您希望 div 拥抱顶部，则需要将 top 设置为 0。你没有注意到它在没有它的情况下向下移动，直到内容被放入，因为内容会将它向下推，但不会向任何其他方向移动。一旦你设置了 top:0;它告诉它保持在 div 的最高点，而不管放入内容 div 的内容如何。我希望这个解释会有所帮助。
谢谢。很有帮助
@Shubendra 很高兴我能帮上忙。这提供了一些额外的上下文：stackoverflow.com/questions/5399708/…

【解决方案2】：

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

好的，原因：

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

您要查找的部分是第二条规则：（我添加的重点）

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

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

【讨论】：

感谢您的帮助
@很高兴您可以在规范中找到它，因为我肯定找不到！顺便说一句，您搜索了什么？
我知道你的意思，在规范中查找内容真的很烦人。我在谷歌上搜索了site:dev.w3.org position absolute，该文档是第一个结果，但后来我不得不阅读索引，标题“尺寸和定位细节”似乎很有希望
@chris 好的，还有 1 个疑问。检查这个小提琴jsfiddle.net/fyE4B/8 在这个我使用了浮点数。在这种情况下是什么导致右侧边栏向下移动。
@Shubendra 完全不同，使用 float 不会从正常流程中删除某些内容。

【解决方案3】：

将 top:0; 添加到您的右侧栏。此后不应再向下推。

【讨论】：