css - 使用 CSS 在 DIV 上放置关闭按钮

Question

我正在尝试将关闭按钮的位置设置在 div 上，但无法将其移到右上角。我已经阅读了许多与此相关的 Stack 文章，但无法正常工作。

有人能提供帮助吗？

http://jsfiddle.net/grantfeldman/K4p6g/1

<div class="tag">
    <a class="closeButton"></a>
    Foo
</div>

div.tag
{
    color: #EEE;
    font-size: 15px;
    font-family: Georgia, Times, serif;
    display: inline-block;
    border: 2px solid #324566;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    background-color: #283957;
    padding: 8px;
    margin: 5px;
}
.closeButton
{
    display:block;
    float:right;
    width:27px;
    height:27px;
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}

Answer 1

工作 fiddle : http://jsfiddle.net/K4p6g/2/

需要的改变:

#divMyTags div.existingTag
{
    position: relative;
}

.closeButton
{
    display:block;
    position:absolute;
    top:-10px;
    right:-10px;
}

这绝对定位关闭按钮相对于其父级。

快速更新您评论中的另一项要求: http://jsfiddle.net/K4p6g/5/

请注意，这是一个使用 jQuery 的快速更新，但它应该能为您提供思路。如果您已经在您的元素中使用 jQuery，那么您就可以了。