Vị trí một phần tử liên quan đến phần tử khác trong CSS

Question

Tôi muốn định vị bốn số div s tương đối so với một phần tử khác. Tôi có một hình chữ nhật div và tôi muốn chèn 4 div s ở các góc của nó. Tôi biết rằng CSS có thuộc tính "position:relative", nhưng điều này liên quan đến vị trí bình thường của phần tử đó. Tôi muốn vị trí của tôi div s không liên quan đến vị trí bình thường của họ, nhưng liên quan đến một yếu tố khác (hình chữ nhật). Tôi nên làm gì?

Answer 1

tôi sẽ đề nghị sử dụng định vị tuyệt đối trong phần tử.

Tôi đã tạo JSfiddle này để giúp bạn hình dung nó một chút.

http://jsfiddle.net/wUrdM/

Answer 2

position: absolute sẽ xác định vị trí các phần tử bằng tọa độ, tương đối so với vị trí gần nhất tổ tiên, ví dụ: phụ huynh gần nhất mà không phải là position: static.

Có bốn div được lồng trong div mục tiêu, cung cấp div mục tiêu position: relative và sử dụng position: absolute trên các thiết bị khác.

Cấu trúc HTML của bạn tương tự như sau:

<div id="container"> 
    <div class="top left"></div> 
    <div class="top right"></div> 
    <div class="bottom left"></div> 
    <div class="bottom right"></div> 
</div> 

Và CSS này nên làm việc:

#container { 
    position: relative; 
} 

#container > * { 
    position: absolute; 
} 

.left { 
    left: 0; 
} 

.right { 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

...