CSS-позиционирование - сверху и справа

Question

Я создаю div, который должен иметь кнопку закрытия в верхнем правом углу, как на картинке изображение http://rookery9.aviary.com.s3.amazonaws.com/4655000/4655386_f01b_150x250.jpg

Первое изображение было сделано в фотошопе. Я пытаюсь сделать то же самое, но с помощью CSS. «Fechar» - кнопка закрытия (на португальском языке). Как лучше расположить его без обходных путей, с чистыми CSS и веб-стандартами?

Вот мой код: 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 более чувствительны к визуализации.несоответствие и изменение размера шрифта, чем позиционирование.В результате я использую положение всякий раз, когда это возможно.

Answer 2

Вы можете сделать:

img.close {
float:right;
margin:25px 25px 0 0;
}

Answer 3

Я бы работал с div-обертками вокруг img

Таким образом, у вас будет div для вашего заголовка div.header, который будет содержать эти div:

• div.logo: логотип слева, содержащий тег img;
• div.title: заголовок страницы;
• div.close: кнопка закрытия, которая будет содержать ваш тег img.

Мне больше нравится использовать отступы, чем атрибут margin. Я думаю, что это работает лучше для целей совместимости.