html - 绝对位置 - div 内的 div 不起作用

Question

我有 div callad subHeader 里面我有：

1 - subHeaderLeft

2 - subHeaderRight

当我向浏览器显示 subHeaderLeft/right 时，subHeaderLeft/right 来自 subHeader 而不是内部。

为什么 subHeaderLeft/right 在 subHeader 之外？

你可以 看到演示 jsFiddle。

谢谢你的帮助。

html代码：

<div id="subHeader">
      <div id="subHeaderLeft"></div>
      <div id="subHeaderRight"></div>
</div>

css code:

#subHeader{
      width: 200px;
      height:100px;
      Helvetica, sans-serif;
      margin: 10px auto;
      border: 3px solid #6fb2e6;
      background: pink;
      }    

#subHeaderLeft{
      position:absolute;
      left:0;
      top:0;      
      width: 70px;
      height:100px;
      margin: 0;
      border: 3px solid #6fb2e6;
      background: white;
      }
#subHeaderRight{
      position:absolute;
      right:0;    
      top:0;      
      width: 30px;
      height:100px;
      margin: 0;
      border: 3px solid #6fb2e6;
      background: yellow;
      }       

​</p>

Answer 1

正在发生的是绝对定位的元素相对于 body 元素而不是它们的直接父元素来定位自己。

具有相对定位的页面元素使您可以控制在其中绝对定位子元素。

所以只需添加

position:relative 

给你的父母#subHeader。

这样，子项的绝对定位对其父项起作用。

http://jsfiddle.net/qjfUk/9/

Answer 2

只需添加位置：相对；到#subHeader 喜欢

#subHeader{
      position:relative;
      width: 200px;
      height:100px;
      Helvetica, sans-serif;
      margin: 10px auto;
      border: 3px solid #6fb2e6;
      background: pink;
      }