CSS-справка для размещения баннера продажи над изображением

Question

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

Черная рамка - это div, ширина которого равна ширине изображения, которое я пытаюсь отобразить в продаже.баннер в правом верхнем углу в верхней части изображения.

ПРИМЕР: http://jsfiddle.net/d5nxT/

Я знаю, что что-то напутало с дисплеями и позициями.Мне просто нужно, чтобы интервал изображения и продажи имел те же настройки, за исключением того, что интервал продажи плавает вправо и имеет более высокий z-индекс, чем изображение.

Answer 1

См. Скрипку и демо:

скрипка: http://jsfiddle.net/d5nxT/2/

Демо: http://jsfiddle.net/d5nxT/2/embedded/result/

float: right, z-index, position: относительный, display: inline-block все не требуется.

Answer 2

Вы должны изменить CSS диапазона продаж следующим образом:

span.onsale {
    display: inline-block;
    width: 59px;
    height: 59px;
    z-index: 10;
    background: url(http://i42.tinypic.com/sq49ow.png) no-repeat;
    position:absolute;
    top:0;
    right:0;
}

Таким образом, изображение продажи размещается в верхнем правом углу родительского изображения (отсюда вверху: 0 и справа:0 стилей)

Answer 3

Есть 2 вещей, которые нужно сделать, чтобы делать такого рода размещения без нареканий.

1. Вам нужен позиционированный (не фиксированный) элемент как родительский.
2. Ваш ребенок должен стать абсолютным.

Если вы обеспечите эти две вещи, вы сможете позиционировать дочерние элементы относительно родителя с помощью свойств top, left, bottom и right в css.

Для вас это, вероятно, означает, что div.interior-images необходимо получить свойство position: relative. И span.onsale получает свойства position: absolute и right: 0.

Ваш измененный jsfiddle можно найти здесь

Answer 4

Вам нужно position:absolute диапазон sale, как это скрипка