将关闭按钮放在父div的右侧

Question

我试图在div的右侧有一个关闭按钮，但比div高一点。如下图所示：

在搜索了一下后，我发现了以下相关问题here，我尝试修改它以获得我想要的东西。

我的尝试可能是viewed on the fiddle：

<div class="area">
    <span class="close">X</span>
    <div class="areaInside">some data</div>
</div>
.areaInside{
    border: 2px dashed #bbb;
    border-radius: 10px;
    color: #bbb;
    min-height: 80px;
}
.area{
    width:70%;
    height:100px;
}
.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
}

但显然它不能做我想要的。我希望关闭按钮位于区域上方，稍微向左侧。如何在不更改标记的情况下实现此目的（仅限css）。

Answer 1

检查jsFiddle

position:relative;
margin-top:-15px;

Answer 2

在这种情况下，您可以使用 line-height 。

.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
    line-height: 2px;
}

Fiddle

Answer 3

您可以使用positions

<强> Demo

.area{
    width:70%;
    height:100px;
    position:relative;
}
.close{
   position: absolute;
    right: 2px;
    top: -10px;
    cursor: pointer;
    font-weight: bold;
}

Answer 4

试试这个：

.close {
float: right;
cursor: pointer;
font-weight: bold;
position: relative;
margin-top: -15px;
margin-right: 10px;
}

<强> DEMO

Answer 5

.close {
float: right;
cursor: pointer;
font-weight: bold;
display: block;
margin-top: -17px;
margin-right: 8px;
background: red;
}

Updated Fiddle

Answer 6

<强> See updated DEMO

使用位置概念使父属性相对和子属性绝对 现在，儿童css相对于父母工作

.areaInside{
    border: 2px dashed #bbb;
    -moz-border-radius: 10x;
    -webkit-border-radius: 10x;
    border-radius: 10px;
    color: #bbb;
    min-height: 80px;
    position:absolute;
    width: 100%;
}
.area{
    width:200px;
    height:100px;
    position:relative;
}
.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
    position: absolute;
   right: 2px;
   top: -14px;
}