Html 在img的底部显示div

HTML:

输出：

希望它看起来像这样：

---

我希望它出现在底部的图像上，就像在图像中一样。但它总是出现在课堂之外

父容器应具有

位置：相对
，子容器（重叠元素）应具有
位置：绝对
。像这样：

.item-display {

}

.item-container img {
    height: 60px;
    width: 95px;
    background-color: grey;
    color: white;
    border-radius: 5px;
    border: 2px solid #252525;
    position: relative;
}

.item-container p { 
    height: 13px;
    width: 95px;
    background-color: #252525;
    color: white;
    text-align: center;
    padding-bottom: 4px;
    bottom: 0;
    position: absolute;
}

你需要这样的东西：


*{
保证金：0；
填充：0；
框大小：边框框；
}
.物品容器{
位置：相对位置；
显示：内联块；
边界半径：5px；
溢出：隐藏；
利润率：10px；
}
.物品容器img{
显示：块；
高度：60px；
宽度：95px；
背景颜色：灰色；
颜色：白色；
边界半径：5px；
边框：2px实心#252525；
}
.物品容器p{
宽度：95px；
背景色：红色；
颜色：白色；
文本对齐：居中；
垫底：4px；
底部：0；
位置：绝对位置；
}

同侧眼睑

我们需要输出HTML而不是PHP。只是一个提示：使用绝对定位@阿曼，你能做一把小提琴吗？抱歉，添加了。*代表什么？这是一个通用选择器，意味着这些属性适用于所有元素。这是一个常用的基址重置。我可以看到，当我在这里运行你的代码片段时，它是有效的，但当我在本地主机上使用它时，它的显示方式是：也许你可以制作自己的演示来复制这个问题。好吧，问题是如果我把php代码放进去它不工作，但是如果我只使用你的代码而没有php，它就工作了。php代码与上面的帖子没有什么不同，我只是重复一下结果@保利乌德
.item-display {

}

.item-container img {
    height: 60px;
    width: 95px;
    background-color: grey;
    color: white;
    border-radius: 5px;
    border: 2px solid #252525;
    position: relative;
}

.item-container p { 
    height: 13px;
    width: 95px;
    background-color: #252525;
    color: white;
    text-align: center;
    padding-bottom: 4px;
    bottom: 0;
    position: absolute;
}

.img-container {
    positon: relative;
}

.overlapping-element {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}