Как наложить изображения без использования postion: absolute?

Question

Я ищу подходящий метод CSS для наложения div изображений поверх другого div изображений (не фонового изображения) без использования position:absolute.Кто-нибудь знает, как это сделать?

Answer 1

http://jsfiddle.net/HUUQ6/2/

Вы можете накладывать / накладывать элементы друг на друга, используя отрицательное поле. Пример:

#b{
    margin-left:-10px;
}

Это переместит элемент b влево на 10 пикселей, наложив на него все, что находится слева от него (при условии, что это элемент display: блочный тип, а не inline, как span).

Answer 2

position: absolute не является «неправильным» - это часть спецификации CSS!Нет другого способа поместить элементы поверх других элементов, если только вы не пользуетесь position: relative или, возможно, некоторыми float свойствами.

position: absolute - это самый простой способ сделать это.Что заставляет вас думать, что это плохая идея?

---

Единственное другое решение - использовать изображение внутри div с фоном, например так:

<div>
    <img src="...">
</div>

Затем укажите diva background-image:

div
{
    background: url(/images/foo.png) no-repeat;
}

Тем не менее, для нескольких изображений я бы определенно придерживался position: absolute.

Здесь есть очень блестящая демонстрация здесь демонстрирует эффект.