CSS 定位 - 顶部和右侧

Question

我正在创建一个 div，它的右上角必须有一个关闭按钮，就像图片中那样 image 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 作为其坐标系并将其定位在距离顶部和右侧边缘 20 像素的位置。

根据我的经验，填充、边距和 float 对呈现不一致和字体大小变化比定位更敏感。因此，我会尽可能使用位置。