Vị trí CSS tuyệt đối đối với phần tử cha mẹ hoạt động tương đối

Question

Trong hành trình dài của tôi để cập nhật các kỹ năng CSS của tôi từ bụi không được chấp nhận mà chúng đã chuyển thành, tôi đã chơi với một số thuộc tính CSS nhất định —phân tích z-index - Tôi nhận thấy một cái gì đó kỳ lạ hoặc có thể có một điều kiện nhất định.

Ví dụ: http://jsfiddle.net/mEpgR/

mẹ Yếu tố div1 là tiếp, tôi đã thực hiện sở hữu vị trí div1 của thiết lập để tuyệt đối, nhưng khi tôi chuyển nó, nó di chuyển tương đối so với mẹ của nó. Tôi đã ấn tượng rằng các mục được đặt thành vị trí tuyệt đối là luồng thông thường bên ngoài và chỉ di chuyển tương đối so với cổng trình duyệt làm cha mẹ của chúng.

Tôi đang thiếu gì?

Nếu liên kết fiddle không hoạt động, mã:

CSS:

.cont { 
position:relative; 
height:200px; 
top:200px; 
left:100px; 
background: green; width: 200px; 
} 

.div1 { 
background:red; 
position:absolute; 
top:50px; 
} 

HTML:

<div class="cont"> 
<div class="div1">DIV1</div> 
</div> 

Answer 1

Một yếu tố vị trí tuyệt đối là vị trí tương đối so với yếu tố phụ huynh đầu tiên mà có một vị trí khác với tĩnh. Vì bạn có nó bên trong một phụ huynh với relative nó sẽ được hoàn toàn vị trí tương đối so với cha mẹ này.

Bạn có thể đang tìm kiếm vị trí fixed, có liên quan đến cửa sổ trình duyệt.