Question

我在处理浮动定位时使用浮动定位（例如使用溢出：隐藏求解）处理div的内容，但我正在尝试学习绝对/相对定位，并且无法弄清楚为什么容器div会崩溃。我的测试用例：

<html>
  <head>
    <style type="text/css">
      body {
        background-color:#eee;
      }

      #content {
        margin:0 auto;
        position:relative;
        border:1px solid red;
        width:800px;
        display:block;
        background-color:white;
      }

      #header {
        border:1px solid black;
        background-color:#777;
        color:white;
        width:800px;
        position:absolute;
        left:0;
        top:0;
      }

      #leftcol {
        position:absolute;
        border:1px solid black;
        background-color:#ddd;
        width:200px;
        top:100px;
        left:0;
      }

      #rightcol {
        position:absolute;
        top:100px;
        left:205px;
        border:1px solid black;
        background-color:#ddd;
        width:500px;
      }

    </style>
    <title>CSS Positioning Example 1</title>
  </head>

  <body>
    <div id="content">

      <div id="header">
        <h1>The Awesome Website</h1>
      </div>

      <div id="leftcol">
        <h2>About</h2>
        <p>
        This website is so awesome because it was made by someone
        and that is really all there is to it.  There.
        </p>
      </div>

      <div id="rightcol">
        <p>This is where I'm going to put some real body text so that it goes
        on and on for a while and so I can get a sense of what happens when
        the text in the paragraph keeps going and the box containing it keeps
        going on as well.
        </p>
      </div>

    </div>

  </body>
</html>

这里发生了什么？为什么红边内容div会崩溃，即使它包含其他div？

Answer 1

这是因为它的所有内容都被设置为position:absolute。这使得这些元素不再流动，并且（布局方面）就像它们甚至不存在一样。请考虑使用position:relative来定位内容。

Answer 2

你真的需要在A List Apart阅读这些文章

CSS Positioning 101

CSS Floats 101

你的问题是为什么带有红色边框的div不会扩展到它的内容。正如约瑟夫所说，问题是你从文件流中取出了这些元素。定位元素绝对会使元素的位置与其父元素和兄弟元素无关。

我使用CSS float property修复了您的代码。看看here。

我强烈建议你阅读这些文章。

为什么div会以相对/绝对定位崩溃？

2 个答案: