7

我有一个包含图像的 div，当我这样做时，我需要在图像内放置一个按钮到图像的右上角

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

这样做是将按钮图像放置在其他位置，它将图像从左到右向下移动，但是现在该按钮可以从最初放置到 div 的最右侧的栏中单击。当我尝试这个

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

它将按钮向右移动，但不会向下移动。

注意：按钮在 div 里面，没有 css 它被放置在图像顶部的中心

4

3 回答 3

6

您应该提供包含图像 a 的 divposition:relative和包含在该 div a 中的按钮position:absolute。这将使按钮相对于容器 div 定位。

于 2012-06-27T15:17:22.163 回答
2

看看下面的这个例子：一张上面有上一个和下一个按钮的图像。 在此处输入图像描述

 <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======================= 问我将讨论你如何处理下一个和上一个事情。尽管这是一个工作示例。

于 2016-02-25T13:54:00.237 回答
1

如果您没有特定理由为此使用 img 标签，我将使用这样的 div 结构：

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

要使按钮正确定位，您需要将 div 位置设置为“相对”，将按钮位置设置为“绝对”。这意味着按钮的绝对位置将基于包装 div 的左上角。

这个 css 的一个例子是：

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

上面的 CSS 将把你的按钮放在右上角，它和 div 的角之间有 5px 的空间。

于 2012-06-27T15:19:49.553 回答