图像上的CSS社交图像[重复]

【问题标题】：css social image over image [duplicate]图像上的CSS社交图像[重复]
【发布时间】：2014-10-01 06:27:12
【问题描述】：

如何将图像放在图像上？例如标题图片上的社交图片。

代码：

<div>
  <img src="http://img2.wikia.nocookie.net/__cb20100409185740/gtawiki/images/e/e7/Fort_carsonn.jpg" width="1200" height="300" />
</div>
<div>
  <img src="http://i12.photobucket.com/albums/a230/buetforasif/FortCarson_ataglance.jpg" width="1200" height="300" />
</div>

<a href="https://www.facebook.com/lordgaming3?fref=ts"> <img src="img/fb.png" style="padding-left: 10px; padding-top:8px" width="30" height="30" /></a>

我想把它放在左上角.. 有什么想法吗？ background-image 是一个错误的想法，因为我的 silder 脚本使用 div 和图像..

【问题讨论】：

相应地设置div的顶部和左侧以及z-index

标签： css image

【解决方案1】：

您可以重叠两个具有两个容器的图像，每个容器包含一个图像，position:relative; 应用于容器，position:absolute; 应用于图像。

CSS

  div.inner {     
    position:relative;
}
div.outer {
    padding: 20px;
    text-align:center; 
    float:left;  
    position:relative;
}
img{
    position:absolute;
    left:0;
    top:0;
}

HTML

<div class="outer"><img src="http://placehold.it/280x280/fff000" /><div class="inner"><img src="http://placehold.it/240x240/000000" /></div></div>

演示 http://jsfiddle.net/a_incarnati/5ouvn063/5/

【讨论】：