位置絕對 - DIV中DIV不工作

Question

我的div callad子頭內，我有：

1 - subHeaderLeft

2 - subHeaderRight

當我顯示到瀏覽器的subHeaderLeft /右的都出來了subHeader不在裏面。

爲什麼subHeaderLeft/right在subHeader的外面？您可以see Demo 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; 
     }  

Answer 1

正在發生的事情是絕對定位的元素定位自己相對於主體元素，而不是他們的直接父。

與相對的頁面元素定位爲您提供了控制，以將子元素絕對定位在其中。

所以只需添加

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