不能包含父母絕對定位的div

Question

我試圖絕對定位一個子div元素相對於其父div的底部限制，以便它將保持在底部，並將繼續承擔的寬度其父母即使其父母動態調整大小。問題是，如果我將父div的位置設置爲使用來自文檔頭部的css的相對位置，它似乎不接受所做的定位，並且子div被定位到身體而不是打破布局。

您可以點擊這裏我的代碼Broken div

CSS：

  #player { 
      width: 640px; 
      height: 360px; 
      background-color: #aaa; 
      border: 1px solid #555;. 
      position: relative; 
     } 
     #player div.controls { 
      width: 100%; 
      height: 26px; 
      line-height: 26px; 
      position: absolute; 
      left: 0; 
      bottom: 0; 
      z-index: 2; 
      background-color: #222; 
      opacity: 0.5; 
     } 
     #player span.control { 
      padding-left: 10px; 
      padding-right: 10px; 
      margin-right: 5px; 
      cursor: pointer; 
     } 
     #player span.control:hover { 
      background-color: #555; 
     } 
     #player span.control:first-child { 
      margin-left: 5px; 
     } 

HTML：

 <div id="player"> 
      <div class="controls"> 
       <span class="control playpause" title="play/pause"></span> 
       <span class="control volume" title="volume"></span> 
       <span class="control resize" title="maximize/restore"></span> 
      </div> 
     </div> 

Answer 1

額外.（點）上發表聲明如下（5號線）是問題：

border: 1px solid #555;. 

瀏覽器只是忽略跟隨它的position: relative。