부모 안에 절대적으로 위치한 div 포함 할 수 없습니다

Question

하위 div 요소를 상위 div의 아래쪽 경계에 상대적으로 배치하려고합니다. 하위 div 요소는 맨 아래에 유지되고 너비가 계속 유지됩니다. 부모가 동적으로 크기가 조정 된 경우에도 해당 부모. 문제는 내가 부모 div 위치를 상대방에게 CSS 머리글에서 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을 무시합니다.