Html 将大图像上的小图像作为绝对位置对齐

我试着将一个小图像与一个大图像在正确的坐标上对齐。我相信使用CSS是非常简单的，但是我自己做不到。我为同一个页面创建了一个JSFIDLE页面

<div style='height:50px'>
    This div height is dynamic
</div>

<div class='imagecontainer'>
    <img src='http://jeema.org/mockimage.png' />
</div>

<div class='iconcontainer'>
    <img src='http://jeema.org/icon-48-mdpi.png' />
</div>

<p class='textcontainer'>Your Custom App</p>

---

我想把小图像（phonegap图标）和文本完全像android应用程序图标一样放在下面的空白处。有人能帮我做这件事吗。

在

位置：绝对，您只需添加：

top: 450px;
left: 40px;

并更改数字，直到其处于正确位置


请注意，您应该将两个容器放在一个公共容器中，否则您的绝对位置可能会有问题：

<div style='height:50px'>This div height is dynamic</div>
<div class="uberContainer">
    <div class='imagecontainer'>
        <img src='http://jeema.org/mockimage.png' />
    </div>
    <div class='iconcontainer'>
        <img src='http://jeema.org/icon-48-mdpi.png' />
    </div>
</div>
<p class='textcontainer'>Your Custom App</p>

此div高度是动态的
您的自定义应用程序

将您的HTML更改为：

<div style='height:50px'>This div height is dynamic</div>
<div class='imagecontainer'>
    <img src='http://jeema.org/mockimage.png' />
    <div class='iconcontainer'>
        <img src='http://jeema.org/icon-48-mdpi.png' />
    </div>
    <div class='textcontainer'>Your Custom App</div>
</div>

解释
您需要有一个具有
位置：relative
的元素，以便在顶部有绝对位置的元素
 谢谢你的回答。但有一个小问题。上部动态div的高度可能会有所不同。如果我将高度从50增加到200，那么绝对位置就会有问题。是的，它会。这就是为什么您需要外部div.Absolute positioning“”我忘记了这一点：外部div（上面示例中的uberContainer）的样式必须是
position:relative。另一个想法是从底部开始，然后向上移动——也就是说，使用相对定位
<div style='height:50px'>This div height is dynamic</div>
<div class='imagecontainer'>
    <img src='http://jeema.org/mockimage.png' />
    <div class='iconcontainer'>
        <img src='http://jeema.org/icon-48-mdpi.png' />
    </div>
    <div class='textcontainer'>Your Custom App</div>
</div>

.iconcontainer {
    position:absolute;
    z-index:1;
    border:1px solid red;
    position:absolute: top:0;
    left:0;
}
.textcontainer {
    position:absolute;
    color:#ffffff;
    text-align:center;
    z-index:100;
    top:20px;
    right:20px;
    height:30px;
    width:auto;
}
.imagecontainer {
    position:relative;
    border:1px solid red;
    width:320px;
    height:620px;
    z-index:-1;
}
.imagecontainer img {
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
}