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

我在使用浮动定位时处理了divs崩溃的内容(例如使用overflow：hidden解决),但我正在尝试学习绝对/相对定位,并且无法弄清楚为什么容器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？

解决方法

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

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

解决方法

猜你在找的CSS相关文章