Question

JSFiddle：http://jsfiddle.net/eFNAF/17/

注意绿色背景和覆盖它的图像。上一个/下一个“按钮”位于照片上方。这导致在按钮最初定位的照片上方存在空白区域。我想将按钮浮动在照片上，如图所示，但没有“使用”照片上方的空间。例如。我希望按钮绝对定位，但仍然相对于它们的容器。另请注意，div.Image使用自动左/右边距居中。这使得position: absolute无法使用。

修改：图片应与绿色框顶部对齐。按钮应偏离图像顶部10px，距图像左/右10px。将显示不同大小的图像，因此无法在CSS中设置图像大小。

Answer 1

<强> CSS

.Image,
.Image img
{
    width:366px;
    height:341px;
    border:0;
}
.Image
{
    position:relative;
}
.Image a
{
    position:absolute;
    top:10px;
    width:28px;
    height:28px;
    background-color:red;
    border:1px solid black;
    text-align:center;
    z-index:2;
    text-decoration:none;
    display:block;
}
.Image a.Previous
{
    left:10px;
}
.Image a.Next
{
    right:10px;
}

<强> HTML

<div class="Image">
    <a href="" class="Previous">&lt;</a>
    <a href="" class="Next">&gt;</a>
    <img src="http://images5.fanpop.com/image/photos/31500000/Happy-Hyena-hyenas-31563531-385-358.jpg">
</div>

<强> DEMO

更新

改变这个：

.Image,
.Image img
{
    width:366px;
    height:341px;
    border:0;
}
.Image
{
    position:relative;
}

为：

img
{
    border:0;
    vertical-align:bottom;
}
.Image
{
    position:relative;
    display:inline-block;
}

<强> DEMO 2

在不使用垂直空间的情况下对齐图像上的按钮

1 个答案:

更新