Định vị tuyệt đối với tỷ lệ phần trăm cho kết quả bất ngờ

Question

Vui lòng xem xét this jsfiddle, chứa mã html này:

<div id="container"> 
    <div id="item">TEST</div> 
</div> 

Và một số CSS:

#container { 
    border: 1px solid red; 
    height: 100px; 
    width: 100px; 
} 

#item { 
    border: 1px dashed purple; 
    position: absolute; 
    left: 50%; 
} 

Kết quả làm tôi ngạc nhiên. Nhìn vào W3 positioning props Tôi mong đợi các #item để có giá trị trái của nó tại 50% của "chứa khối": #container. Tuy nhiên, nó có vẻ là 50% của toàn bộ trang, không chỉ là containing block. Thậm chí còn đáng ngạc nhiên hơn nữa: nếu tôi nói tràn bộ chứa để ẩn "TEST" vẫn sẽ ở đó.

Tất cả các trình duyệt chính (bao gồm IE9) dường như có cùng hành vi, vì vậy kỳ vọng của tôi có thể không chính xác. Câu hỏi sau đó là: phần nào của thông số này giải thích hành vi này, nếu có?

Answer 1

Định vị tuyệt đối được áp dụng liên quan đến yếu tố cha kế tiếp có vị trí không tĩnh. Trong trường hợp của bạn, đó là trang đầy đủ. Hãy thử đặt position: relative trên bộ phận vùng chứa.
See the jsFiddle.

Xem:W3C - 10.1 - Definition of "containing block"

Answer 2

Khi đưa ra một vị trí tuyệt đối yếu tố bạn mang nó ra khỏi dòng chảy bình thường của tài liệu. Tuyệt đối là phần phía trên bên trái của màn hình bất kể các phần tử khác trong trang. Vì vậy, bằng cách nói bên trái: 50% bạn đang nói một nửa từ bên trái tuyệt đối của màn hình.

Answer 3

thêm

position:relative; 

để div container.