Как разместить тег div поверх тега div

Question

Кто-нибудь знает, как уложить тег div, который имеет изображение в нем поверх другого тега div, в котором есть одно его изображение? В конце концов, я хочу разместить одно изображение поверх другого изображения.

Благодаря

Answer 1

Почему бы не сделать два DIV-тегов, один корпус другого, как с фоновыми изображениями, применяемых к ним. Затем вы можете использовать положение фона, чтобы разместить их так, как вам хотелось бы.

<div id="one"> 
    <div id="two"> 
    </div> 
</div> 

#one{background:url('image_one.png') no-repeat} 
#two{background:url('image_two.png') no-repeat} 

EDIT: Убедитесь, что вы установите высоту и ширину div-х, чтобы соответствовать размеру изображения.

Answer 2

Поместите фоновое изображение в нижнее <div> тег, и положите <img /> внутри div. Другая возможность - использовать теги 2 <img>, но примените Position:absolute к обоим и используйте z-index, чтобы указать порядок слоев.

Answer 3

Вы можете установить его в виде вложенного div с внутренним набором div, чтобы использовать относительное позиционирование.

Ниже лучший учебник я когда-либо видел на позиционирование CSS:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 4

раствор 1:

<div style="position:relative"> 
    <div style="position:absolute;top:0;left:0;"> 
    <img src="foo.png" /> 
    </div> 
    <div style="position:absolute:top:0;left:0;"> 
    <img src="bar.png" /> 
    </div> 
</div> 

Раствор 2:

<div style="background:url('foo.png') no-repeat scroll transparent"> 
    <img src="bar.png" /> 
</div> 

не большие решения ... Не уверен, почему вы хотели бы это сделать в любом случае