Общие решения
MDN - отличный ресурс для вопросов, подобных этому. В статье Понимание CSS z-index представлены различные способы достижения цели после ОП. Некоторые из них быстро описаны ниже.
Все примеры
Это включает в себя все шесть основных примеров, которые я настроил.
.clear {
clear: both;
}
.relPos {
position: relative;
}
.absPos {
position: absolute;
}
.relPos0 {
position: relative;
}
.relPos1 {
left: -154px;
top: -33px;
position: relative;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.relPos2 {
position: relative;
right: 150px;
}
.bgImg {
background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
width: 150px;
height: 84px;
}
.bgImg2 {
background-image: url(http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg);
width: 84px;
height: 84px;
}
.relPos3 {
position: relative;
}
.relPos4 {
left: -154px;
top: -33px;
position: relative;
}
.relPos5 {
left: 154px;
top: 25px;
position: relative;
}
.relPos6 {
position: relative;
}
.relPos7 {
left: 154px;
top: 25px;
position: relative;
z-index: 2;
}
<h1>EX0 - Default</h1>
<p>Two images and no CSS.</p>
<img src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<h1>EX1 - Position: Absolute & Relative</h1>
<p>Making one image's position absolute and the other relative will create an overlay.</p>
<img class="absPos" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<h1 style="padding-top:1em;">EX2 - Position: Relative & Relative</h1>
<p>Both images can have a relative position but then <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> will need to be utilized.</p>
<img class="relPos0" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos1" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<h1>EX3 - Using Position & Float</h1>
<p>Float can be used with relative position, but <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> will need to be utilized.</p>
<div style="width:200px;">
<div class="floatRight relPos2">
<img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
</div>
<div class="floatLeft">
<img src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
</div>
</div>
<h1 class="clear">EX4 - Background-image</h1>
<h2>With div</h2>
<p>Another easy way to overlay images is to make the back image a background image using the CSS property <code>background</code>. Anything inside the element with the background image will appear on top.</p>
<div class="bgImg">
<img src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
</div>
<h2>img Alone</h2>
<p>Instead of applying the background image on another element, it could be applied to the overlay image itself. The problem here is that the png overlay would need to be the same size as the background image. That's how you would position it over the jpg.
Via <a href="http://www.cssmojo.com/png_overlay_with_no_extra_markup/" target="_blank">CSSMojo.com</a>.</p>
<img class="bgImg2" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" alt="" />
<h1>EX5 - Position & z-index</h1>
<p>Order matters if z-index is not employed. EX6 is an example wher the ordering is correct and only top and left are used for the positioning.</p>
<img class="relPos3" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos4" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<h1>EX6 - Position & z-index</h1>
<p>If both objects are relative, order will matter when using the <code>top</code>, <code>right</code>, <code>bottom</code>, or <code>left</code> properties. Reordering the elements (see EX5) or using larger <code>z-index</code> values can resolve this issue.</p>
<img class="relPos5" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
<img class="relPos7" src="http://johnsuarez.com/stackoverflow/1345210-wplogo.png" width="50px" />
<img class="relPos6" src="http://johnsuarez.com/stackoverflow/1345210-greenbg.jpg" width="150px" />
Вместо того, чтобы публиковать все примеры ниже, я включаю только то, что, по моему мнению, легко решит проблему ОП.
EX1 - Позиция: абсолютная и относительная
Создание позиции одного изображения absolute, а другого relative создаст наложение.
EX2 - Положение: Относительное и Относительное
Оба изображения могут иметь относительную позицию, но тогда необходимо будет использовать свойства top, right, bottom или left.
EX4 - Фоновое изображение с использованием div
Еще один простой способ наложения изображений - сделать фоновое изображение фоновым, используя свойство CSS background. Что-нибудь
внутри элемента с фоновым изображением появится сверху.
EX6 - Позиция и z-индекс
Если оба объекта являются относительными, порядок будет иметь значение при использовании свойств top, right, bottom или left. Изменение порядка элементов (см. EX5) или использование больших значений z-index может
решить эту проблему.
Альтернативы
CSS-трюки охватывают технику наложения слоев с использованием CSS3, используя только свойство background.
background:
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */
url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */
url(Paper-4.png); /* On bottom, like z-index: 1; */
через http://css -tricks.com / порядок размещения нескольких фонов /