Question

我要做的是在用户悬停图片时显示删除图标。悬停部分正在工作，但问题是我无法将x按钮定位到图像的右上角。

HTML

<div class="photos">
    <div id="images">
        <a href=# data-lightbox="roadtrip">
            <img class=img width=100 height=100 alt='Unable to View' src=""></a>

        <a href="#" class="del_photo" id=""><img src="images/icon_del.gif" border="0" /></a>
    </div>
</div>

CSS

#images {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px
}

.del_photo {
    display: inline-block;
    float:right;
    margin:5px 5px 0 0;
}

http://jsfiddle.net/jHG9v/

Answer 1

使用此示例中的position:relative;和position:absolute;：http://jsfiddle.net/Y75va/

修改的

请参阅@Alexander Kludt anwser获取代码+更多信息。

Answer 2

您可以更轻松地使用容器的相对位置，并将关闭按钮置于绝对位置（请参阅http://jsfiddle.net/jHG9v/1/）：

#images {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
}

.del_photo {
    display: inline-block;
    float:right;
    margin:5px 5px 0 0;
    position: absolute;
    top: 0;
    right: 0;
}

Answer 3

将CSS更改为此。

#images {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px
    position: relative
}

.del_photo {
    position: absolute;
    top: 0;
    right: 0;
}

Answer 4

您可以尝试this

CSS

#images {

    float: left;
    width: 100px;
    height: 100px;
    position: relative
}

.del_photo {
    position: absolute;
    right: 0;
    top: 0;
    float:right;
    margin:5px 5px 0 0;
}

删除右上角的按钮

4 个答案: