làm thế nào để thiết lập vị trí của một nguyên tố dựa trên đó là mẹ

Question

hi Tôi có một div chứa chỉ là một hình ảnh như thế này:

(div) 
    (img. …) 
(/div) 

Bây giờ, tôi muốn tạo một dấu ấn trong hình ảnh, s tôi sử dụng:

$(div).append((img src =mark.jpg id =mark)). 

sau đó thiết lập vị thế của mình:

$(div img#mark).position(…) 

Ở đây tôi không biết làm thế nào để thiết lập nó.

Tôi chỉ muốn đặt vị trí của dấu trong phần tử gốc.

Trong thực tế, những gì tôi muốn như bản đồ google, khi bạn tìm kiếm một cái gì đó trong bản đồ google, kết quả sẽ được đánh dấu trên bản đồ.

Tất nhiên, yêu cầu của tôi rất dễ dàng.

Tôi đã nghĩ rằng để có được bù đắp của phụ huynh, sau đó tính toán vị trí thực sự của hình ảnh đánh dấu.

Nhưng tôi không thể làm được. Bất kỳ ý tưởng ?

Btw, tôi hỏi điều này trong điện thoại của mình, vì vậy tôi không thể tạo một định dạng đẹp.

Answer 1

Bạn có thể sử dụng CSS:

div { position: relative; } 
div img#mark { position:absolute; } 

Và sau đó thiết lập vị trí như thế này:

$("div img#mark").css({ 
    'top': '10px', 
    'left': '10px' 
}); 

Điều đó làm những gì bạn có nghĩa là?

Answer 2

$("div").css('position', 'relative'); 
$("div img#mark").css({ 
    position: 'absolute', 
    top: '0px', 
    left: '0px' 
}); 

Thay đổi giá trị trên cùng và bên trái cho phù hợp với vị trí bạn muốn định vị.

Answer 3

Tôi nghĩ rằng bạn không cần jQuery để làm điều này:

div { 
    position: relative; 
} 

img#mark { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
} 

Bằng cách này, img dấu # sẽ được bố trí tương đối so với vị trí div của:

+--------------- 
| div 
| ___________ 
| | img#mark 
| | 
| | 
| ----------- 
| 
+--------------- 

Answer 4

Nếu tôi đọc bạn một cách chính xác, hiệu quả mong muốn có thể đạt được với đồng bằng css:

#container { 
    position:relative; 
} 
#mark { 
    position:absolute; 
    left: [to your liking] px; 
    top: [to your liking] px; 
} 

PS: Ồ, chỉ 3 ppl đánh tôi với nó.