CSS定位 - 顶部和右侧

Question

我正在创建一个div,它必须在右上角有一个关闭按钮,就像在 图像中一样http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg

第一张图片是在photoshop中制作的.我正在尝试使用CSS做同样的事情."Fechar"是关闭按钮(葡萄牙语).使用干净的CSS和Web标准,没有变通方法正确定位它的更好方法是什么？

这是我的代码:http://jsfiddle.net/wZJnd/

这是我能达到的目标.

Answer 1

我会在相对定位的#header中使用绝对定位:

HTML

<div id="header"> 
  <h1>Your Title</h1>
  <a href="" class="close">Close</a>
</div>

CSS

#header {
    width: 700px;
    height: 200px;
    position: relative;

    text-align: center;

    background: #000 url(the-logo.png) no-repeat 30px 10px;
}

#header .close {
    position: absolute;
    top: 20px;
    right: 20px;
}

这将导致a.close链接使用#header作为其坐标系,并将其从顶部和右边缘定位20px.

根据我的经验,填充,边距和浮动对渲染不一致和字体大小更改比定位更敏感.结果,我尽可能使用位置.