CSS - nút vị trí bên trong hình ảnh

Question

Tôi có div có chứa một hình ảnh, tôi cần phải đặt một nút bên trong hình ảnh để xung quanh góc trên bên phải của hình ảnh, khi tôi làm điều này

#button_id{ 
position: relative; 
    left: 270px; 
    top: 30px; 
} 

Điều này là làm là làm cho hình ảnh nút được đặt ở một nơi khác, nó di chuyển hình ảnh sang trái và phải, nhưng bây giờ nút có thể nhấp vào trong thanh từ nơi ban đầu nó được đặt ở phía xa bên phải của div. Khi tôi thử số này

#button_id{ 
    position: relative; 
    float: right; padding: 0px -40px -15px; 
} 

nó di chuyển nút sang phải nhưng nó sẽ không di chuyển xuống.

Lưu ý: nút nằm bên trong div, mà không có css nó được đặt trên đầu trang của hình ảnh ở trung tâm

Answer 1

Bạn nên cung cấp cho các div chứa một nút position:relative và của bạn mà là hình ảnh chứa trong div đó position:absolute. Điều đó sẽ định vị nút tương đối với div vùng chứa.

Answer 2

Nếu bạn không có một lý do cụ thể được sử dụng một thẻ img cho điều này tôi sẽ sử dụng một cấu trúc div như thế này:

<div id="my_image"> 
<button id="button_id" /> 
</div> 

Để có được nút định vị một cách chính xác bạn đang muốn đặt vị trí div thành "relative" và vị trí nút thành "absolute". Điều này có nghĩa là vị trí tuyệt đối của nút sẽ được dựa trên phía trên bên trái của div gói.

Một ví dụ về css này sẽ là:

#my_image { position: relative; } 
#button_id { position: absolute; right: 5px; top: 5px; } 

CSS ở trên sẽ đưa nút của bạn ở phía trên bên phải với 5px không gian giữa nó và góc của div.

Answer 3

Hãy xem ví dụ bên dưới: hình ảnh có nút trước đó và tiếp theo trên đó.

<div class="thumbnail rec thmbnail-large"> 
    <img class="img-thumbnail img-thumbnail-large-0 img-responsive" src="http://daniel-ethiopia.rhcloud.com/nivo/2.jpg" data-holder-rendered="true" width="100%" style="margin-left:0px;height:auto;"> 
    <input type ="button" class="classic_button_next btn btn-primary btn-large" id="next_button" value="Next >>"/> 
    <input type ="button" class="classic_button_prev btn btn-primary btn-large" id="prev_button" value="Previous <<"/>    
</div> 

CSS ======================================== ===

<style type="text/css"> 
.classic_button_next{ position: absolute; right: 5px; top: 5px; } 
.classic_button_prev { position: absolute; right: 88px; top: 5px; } 
<style> 

JScript ======================= hỏi và tôi sẽ được thảo luận làm thế nào bạn làm việc với các điều tiếp theo và trước đó .despite rằng đây là một ví dụ làm việc.