Question

我问这是为了学习目的;这种行为没有任何消极方面，但我只是想知道这是否会在将来产生任何负面影响。

所以我有一个容器div：content_wrap，还有另外两个div：side_bar和main_content。容器div为980px width，用于使用margin-left和margin-right对其内容进行居中。

正是这样做，但是，当我调试页面时（在Firefox中），我注意到浏览器将div渲染为0x0px并将父div渲染到屏幕外。但是，它确实正确定位了子div。请参阅此JSFiddle以获取示例：http://jsfiddle.net/7fsXp/7/

我用Google搜索了这个，大多数答案都与floats有关，并且使用clear:both解决了，但我没有使用任何浮点数。我注意到如果我将main_content div从position:absolute;更改为position:relative;，则content_wrap会正确显示。或者我可以通过为height设置content_wrap来解决此问题。

我实际上并不需要能够看到content_wrap，所以没有真正的问题，因为它正在以子集div为中心来完成它的工作。我只是想知道离开它是不是一个坏习惯？这是件坏事还是重要？

Answer 1

position: fixed和position: absolute将元素从流中取出，因此在所有子div上使用这些位置中的任何一个都将完全折叠父div。

如果您的内容低于折叠的div，则会在 this 之类的内容中向上/向下流动。

您不需要绝对定位main_content div，但是您需要更改一些内容以对齐侧边栏和main_content。

<强> DEMO

由于侧边栏是固定的，因此它使用文档，而不是容器div作为top的参考，而main_content将使用正文（除非您将position: relative添加到容器中）。摆脱主体的默认填充/边距将修复小的对齐差异。

body {
    padding: 0;
    margin: 0;
}

#main_content {
    //remove position: absolute;
    margin-top:70px; //top: 70px won't work unless you specify position
}

Answer 2

尝试在此HTML中添加其他元素并享受恐怖：D

你的代码实际上有很多东西，我不会这样做。首先，当一个元素带有position: absolute或position: fixed时，其布局被其他元素“忽略”，或者换句话说，不能“推”任何元素，这就是为什么你的容器的高度为0。这就像他们是空灵的（我知道最好的解释）。

您应该查看有关定位的文章 - http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

它们位于您期望的位置的事实是HTML中实际上没有其他元素，而absolute元素相对于body定位，因此{ {1}}一个（但这是fixed总是这样做的元素）。看看当我向父div添加一些其他内容时会发生什么 - http://jsfiddle.net/7fsXp/13/

长话短说 - 如果没有它们，你不应该用绝对或固定元素形成你的布局。

Answer 3

这取决于您愿意做什么，但由于position的默认div为position: static;，因此更改position: relative;将避免父div的崩溃。< / p>

奇怪的容器div行为

3 个答案: