将图像定位和覆盖在另一个图像上

Question

看看微小的Facebook图标如何位于右下角的另一个图像上？

如何使用HTML / CSS / Rails / Prototype组合来做到这一点！？一个例子就是很棒。也许在jsfiddle.net。

Answer 1

以下是使用div而不是图像的简单示例：http://jsfiddle.net/sqJtr/

基本上，您将两个图像放在同一个容器中。给容器一个非静态的位置（在我的例子中，相对）。然后给出叠加图像position: absolute，然后根据需要使用bottom和right定位。

Answer 2

您可以使用css来解决问题。

div {
  position: relative;
  display: inline;
}
.imtip {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div>
  <img src="http://i.stack.imgur.com/Blaly.png" />
  <img src="http://www.w3schools.com/favicon.ico" class="imtip" />
</div>

基本上，我或多或少地做过ZDYN所说的，只是你需要在容器中包含display: inline，否则容器div会跨越整个宽度。

Answer 3

你走了。这是使用2张图片完成的。

<div class="parent">
    <img src="http://i.ehow.com/images/a06/dv/5g/buy-car-repair-manuals-online-200X200.jpg" />
    <div class="inner"><img src="http://www.airporthybridrentals.com/wp-content/uploads/2009/04/car-rental-sign.gif" /></div>
</div>

.parent{
    width:200px;
    height:200px;
    position:absolute;
    z-index:0;
}

.inner{
    position:absolute;
    z-index:1;
    bottom:0;
    right:0;
}

检查http://jsfiddle.net/WPWzq/

处的工作示例

Answer 4

See my answer to this question

与你的情况不同的是你不需要任何javascript，如果你不想，你可以只添加div到html并将它们绝对放在照片上。

我想我会亲自使用javascript添加div，这样他们就不会混淆html。

Answer 5

试试：

html, body, .wrapper { height: 100%; }
.wrapper { position: relative; }
.top { height: 15%; background: #222; }
.mid { height: 70%; background: #CCC; }
.bot { height: 15%; background: #777; }
.container { 
    position: absolute;
    background: #FFF; 
    padding: 20px; 
    width: 80%;
    top: 10%;
    left: 50%;
    margin-left: -40%;
    clear: both;
}
.container > div {
    float: left;
    width: 42%;
    height: 250px;
    padding: 1%;
}
.container > div:first-child {
    background: #EEE;
    float: left;
    width: 54%;
}
.container > p {
    position: absolute;
    bottom: -100px;
    right: 0;
    border: 1px solid #EEE;
    width: 50%;
    height: 70px;
}

<div class="wrapper">
    <div class="top"></div>
    <div class="mid">
        <div class="container">
            <p>Some Text Here</p>
            <div>IMAGE HERE</div>
            <div>DESCRIPTION HERE</div>
        </div>
    </div>
    <div class="bot"></div>
</div>

从stackoverflow收集。