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

Question

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

注意绿色背景和覆盖它的图像。上一个/下一个“按钮”位于照片上方。这会导致按钮最初所在的照片上方出现空白区域。我想如图所示将按钮 float 在照片上，但不“使用”照片上方的空间。例如。我希望按钮绝对定位但仍然相对于它们的容器。另请注意，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