CSS - кнопка положения внутри изображений

Question

У меня есть DIV, который содержит изображение, мне нужно поместить кнопку внутри изображения примерно в верхнем правом углу изображения, когда я делаю это

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

Что это делая изображение кнопки размещено где-то в другом месте, оно перемещает изображение влево и вправо, но теперь кнопка имеет возможность щелчка в баре, откуда она была первоначально размещена в крайнем правом углу div. Когда я пытаюсь это сделать

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

он перемещает кнопку вправо, но не сдвигает ее.

Примечание: кнопка находится внутри DIV, без CSS оно помещается в верхней части изображения в центре

Answer 1

Вы должны дать DIV, содержащий изображение с position:relative и вашей кнопки, содержащиеся в этом div a position:absolute. Это будет позиционировать кнопку относительно контейнера div.

Answer 2

Если у вас нет особых причин быть с помощью IMG тег для этого я хотел бы использовать Div структуру, как это:

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

Чтобы получить кнопку, чтобы правильно позиционировать вы будете хотеть установите позицию div в положение «relative» и положение кнопки «absolute». Это означает, что абсолютное положение кнопки будет основано на левом верхнем углу оберточного div.

Примером этого CSS будет:

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

выше CSS будет поставить кнопку в правом верхнем углу с 5px пространства между ним и углу дел.

Answer 3

Посмотрите этот пример ниже: изображение с предыдущей и следующей кнопками над ним.

<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 ======================= Просите, и я буду обсуждать, как вы работаете со следующей и предыдущей вещи несмотря на то, что это рабочий пример.