Наложение одного изображения на другое css

Question

У меня 4 изображения подряд. Я хочу, чтобы третье изображение было наложено поверх второго изображения, но не смогло успешно заставить его работать. Вот моя скрипка:

http://jsfiddle.net/AndroidDev/Asu7V/4/

<div style="width:1000px"> 
    <div class="x"> 
     <img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" /> 
    </div> 
    <div class="x"> 
     <img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" /> 
    </div> 
    <div class="x"> 
     <img src="http://playgo.ro/wp-content/themes/play3.0/play.png" /> 
    </div>  
    <div class="x"> 
     <img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" /> 
    </div>   
</div> 

Answer 1

Добавить воспроизведения изображение второго ДИВ и использовать position absolute и relative, чтобы сделать это один над другим.

.x{ 
    border:1px solid #000000; 
    display:inline-block; 
    height:128px; 
    position:relative 
} 
.overlay_img{ 
    position:absolute; 
    top:0; 
    left:0 
} 

DEMO

Answer 2

Если вы просто хотите, чтобы это было более 2-изображение затем обернуть эти 2 изображения в 1 деления и дать ему position:relative затем дайте IMAGE2 и изображение 3 position:absolute и z-index:0 & z-index:1 соответственно. И разместите их до top:0; & left:0;, которые должны это сделать :)

Answer 3

Если вы можете использовать современный CSS и нужно только третье изображение для наложения второго (как в случае, вам не нужно повторять этот шаблон во многих местах) , вы можете использовать селектор п-й ребенок:

.x:nth-child(3) { 
    margin-left: -136px; 
} 

Это будет выбран третий элемент с x класса и переместите его влево.

Answer 4

если вы используете margin или position свойство, вы можете достичь вид накладывается,

Посмотрите на http://jsfiddle.net/manojmcet/Z7Y88/