Question

我有div callad subHeader我有：

1 - subHeaderLeft

2 - subHeaderRight

当我向浏览器显示subHeaderLeft / right时，它们不在subHeader中，而不在内部。

为什么subHeaderLeft / right离开subHeader？

感谢您的帮助。

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;
      }

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;
      }

绝对位置 - div内部不工作

2 个答案: