0

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

緑色の背景とその上にある画像に注目してください。前/次の「ボタン」は写真の上に配置されます。これにより、ボタンが最初に配置されていた写真の上に空白のスペースができます。写真の上のスペースを「使用」せずに、写真の上にボタンを浮かせたいと思います。たとえば、ボタンを絶対に配置する必要がありますが、それでもコンテナーに対して相対的です。div.Imageまた、自動左/右マージンを使用して中央に配置されていることにも注意してください。これにより、position: absolute使用できなくなります。

編集:画像は緑色のボックスの上に揃える必要があります。ボタンは、画像の上部から 10 ピクセル下、画像の左右から 10 ピクセルの位置にオフセットする必要があります。異なるサイズの画像が表示されるため、CSS で画像サイズを設定することはできません。

4

1 に答える 1

2

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>

<a href="http://jsfiddle.net/eFNAF/19/" rel="nofollow">デモ

更新しました：

これを変える：

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

に：

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

デモ 2

于 2012-08-13T20:34:18.017 に答える