позиционирование по z-индексу

Question

У меня есть два div, вложенные, и я хочу разместить изображение перед содержимым inner-div, чтобы оно выглядело как украшение по краям (большая часть его прозрачная.)

Я думал, что использование z-index и абсолютного позиционирования сделает это, но это не сработало. Мой простой тест - использовать два вложенных элемента div с фоновым изображением и пытаться контролировать, какой из них находится впереди, изменяя значение z-index. Радости нет - что я делаю не так?

<style type="text/css">
        div
        {
            width: 300px;
            height: 300px;
            border: solid 1px black;
            background-repeat: no-repeat;
            background-position: 0px;
        }
</style>

<div style="background-image: url(coffee1.png); z-index: 3; position: absolute; left: 0px; top: 0px;">
</div>
<div style="background-image: url(coffee2.png); z-index: 1; position: absolute; left: 0px; top: 0px;">
</div>

Спасибо

Мт.

Answer 1

Ваш DIV не имеет размеров.У него есть фоновое изображение, а не тег IMG, поэтому ваш DIV не знает, насколько большим он должен быть.

position:relative должен быть на внешнем элементе - это дает точку отсчета для внутреннегоэлемент, говорящий, что «я - новый (0,0)»

position:absolute должен быть на внутреннем элементе, он берет свою контрольную точку от ПЕРВОГО внешнего элемента, который имеет «положение: относительное», в противном случаеПредполагается, что ТЕЛО (0,0).

Answer 2

z-index не работает на "position: относительный";

Напишите те же самые два div, но не вложенные, затем поместите "position: absolute" в оба.

Чтобы расположить их, установите свойства top, left, right и bottom css.

Затем вы можете использовать z-index, чтобы сказать, какой div будет отображаться сверху.