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

Question

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

mix*_*mix 6 css positioning css-position

我在使用浮动定位(例如使用overflow:hidden进行求解)时处理了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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Jos*_*kle 8

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

@mix - `绝对`是相对于他们的祖先,但他们仍然不在他们的祖先的其他元素的流动. (2认同)

归档时间：	13 年，11 月前
查看次数：	14296 次
最近记录：	13 年，11 月前