把關閉按鈕放在父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

使用位置的概念MAK e父母財產親屬和子女財產絕對 現在的孩子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; 
}