Наличие текста поверх изображения в другом div

#css

Вопрос:

Итак, чего я пытаюсь добиться, так это того, чтобы текст с левой стороны располагался поверх изображения с правой стороны

 <div class="body-content">
    <div class="left-side">
        <p>text</p>
    </div>
    <div class="right-side">
        <div class="img-container>
            <img/>
        </div>
    </div>
</div>

проблема в том, что, похоже, это вообще не работает, когда изображение отключено в другом div.

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

вот фрагмент, который объясняет, что происходит http://jsfiddle.net/F3UQr /

1. Вы спрашиваете, нормально ли помещать их в один DIV или есть причина, по которой они не могут находиться в одном DIV?

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

Ответ №1:

Все, чего вам не хватает, это атрибута position с левой стороны.

Для применения свойства z-index элемент также должен иметь позицию, отличную от статической.

 .left-side {
    position: relative;
    z-index:1;
}

http://jsfiddle.net/dean_simcox/MnYa8/

Ответ №2:

Кажется, я понимаю, что вы пытаетесь сделать. Для z-индекса установлено значение «.left-side», но для этого также необходимо задать позицию, чтобы это вступило в силу. Я установил позицию в «относительную», но вы также можете сделать абсолютную, фиксированную и т.д. Обновленная скрипка здесь: http://jsfiddle.net/JS26k /

 .left-side
{
     z-index: 1;
     position: relative;
{