Question

我连续有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

在第二个div中添加播放图像，并使用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 div中，然后将其position:relative给出，然后分别给出Image2和图像3 position:absolute和z-index:0 & z-index:1。并将它们定位到应该这样做的top:0; & left:0;：）

Answer 3

如果您可以使用现代CSS并且只需要第三个图像覆盖第二个图像（例如，您不需要在很多地方重复此模式），您可以使用第n个子选择器：

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

这将选择带有x类的第三个项目并将其移到左侧。

Answer 4

如果您使用margin或position属性，则可以实现重叠视图，

查看http://jsfiddle.net/manojmcet/Z7Y88/

在css中将一个图像与另一个图像叠加

4 个答案: