Элемент внутри DIV расположен под ним

Question

Я случайно удалил свой вопрос по этому поводу.

У меня есть следующий HTML:

<div id="frame">
    <img src="sample.png" alt="" />
</div>

CSS:

#frame { position: relative; z-index: 2; }
#frame img { position: relative; z-index: 1; }

ЧтоЯ пытаюсь сделать так, чтобы родительский DIV изображения был расположен сверху (это рамка).Кажется, CSS не делает этого, но почему?Как я могу сделать эту работу?

Answer 1

Дочерние элементы элементов будут иметь более высокий порядок наложения, чем их родители, естественно (потомки элемента html должны быть видны в ТОП html и т. Д.).

Вы можете компенсировать это естественное поведение, установив z-index на -1 на img.

РЕДАКТИРОВАТЬ: Почему вы не можете просто заключить другой «контент» и / или использовать другую оболочку? Было бы идеальным решением. В противном случае вы взламываете и пытаетесь обойти естественное поведение порядка размещения, которое означает таким образом

<div id="parent">
    <div id="frame"></div>
    <div id="child"></div>
</div>

Редактировать # 2: Думаю, я все время был прав, z-индекс -1 тоже работает: http://jsfiddle.net/yBH2G/1/

Answer 2

Вы можете достичь того, что вы хотите (может не работать в старых браузерах):

#frame { ... no special css (but background should be [semi-]transparent) ... }
#frame img { position: relative; z-index: -1; }

Обратите внимание на отрицательное z-index число. Вот почему некоторые браузеры имеют проблемы, но все современные браузеры справляются с этим просто отлично.

@ Edit: вот тестовый пример, который работает в Firefox 3.6, IE8, Safari 4 (IE6 и 7 не должны иметь положение элемента, в котором они содержатся, то есть, чтобы он работал, position: static);

<div style="border: 5px solid red; width: 190px; height: 190px; position: relative; zoom: 1; margin: 20px">Example Text
<div style="position: absolute; z-index: -1; width: 200px; height: 200px; background-color: blue; opacity: .7; top: -10px;"></div>
</div>

Answer 3

Почему бы не поместить "рамку" и изображение в сам div.

#box img, #box #frame {
    position:relative;
}
#box #frame {
    z-index: 100;
}

<div id="box">
    <div id="frame"></div>
    <img src='image.jpg' />
</div>

Answer 4

Дайте родительскому div установленную высоту и посмотрите, что произойдет.