Позиционирование CSS - верхняя и правая

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

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

Вот мой код: http://jsfiddle.net/wZJnd/

Это насколько я могу достичь.

Ответы

Ответ 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 с верхнего и правого края.

В моем дополнении, поля и float более чувствительны к отображению несогласованности и изменения размера шрифта, чем позиционирование. В результате я использую положение, когда это возможно.

Ответ 2

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

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

Ответ 3

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

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

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

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