Html 将div定位在引导行内的图像上方

我试图在图像上方放置一个div。正如你在下面的代码中看到的，在黑色div的中间有一个白色的方块。

.item{
位置：相对位置；
宽度：110px；
高度：110px；
边界半径：5px；
边框：1px实心#BEBEBE；
/*填充：10px*/
利润率：10px；
显示：内联块；
文本对齐：居中；
光标：指针；
z索引：999999999！重要；
背景色：#000；
}
.itemimg{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
高度：85px；
利润上限：-8px；
z指数：1；
}

---

只需将

top

值设置为

150%

。这是

高度的

100%

，加上

50%

以补偿

变换

请注意，在下面的示例中，我还添加了一个边框来说明这一点：


.item{
位置：相对位置；
宽度：110px；
高度：110px；
边界半径：5px；
边框：1px实心#BEBEBE；
/*填充：10px*/
利润率：10px；
显示：内联块；
文本对齐：居中；
光标：指针；
z索引：999999999！重要；
背景色：#000；
}
.itemimg{
位置：绝对位置；
最高：150%；
左：50%；
转换：翻译（-50%，-50%）；
高度：85px；
利润上限：-8px；
z指数：1；
边框：1px纯红；
}
简而言之，子元素的
位置不能在其自身父元素的下方。您需要向映像中添加同级

我正确地理解您希望在图像上添加覆盖。请参阅更新示例，该示例在图像和项目上方有一个红色覆盖层。我还评论了不必要的CSS规则：


.item{
位置：相对位置；
宽度：110px；
高度：110px；
边界半径：5px；
边框：1px实心#BEBEBE；
/*填充：10px*/
利润率：10px；
显示：内联块；
文本对齐：居中；
光标：指针；
/*z索引：999999999！重要*/
背景色：#000；
}
.itemimg{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
高度：85px；
利润上限：-8px；
/*z指数：1*/
}
.覆盖{
位置：绝对位置；
背景：红色；
不透明度：0.5；
宽度：100%；
身高：100%；
}
据我所知，您不想显示“白盒”，这就是为什么您要隐藏在“黑盒”后面。如果我是对的，那么为什么不在负范围内使用“左”位置来隐藏它呢


.item{
位置：相对位置；
宽度：110px；
高度：110px；
边界半径：5px；
边框：1px实心#BEBEBE；
/*填充：10px*/
利润率：10px 20px；
显示：内联块；
文本对齐：居中；
光标：指针；
z索引：999999999！重要；
背景色：#000；
}
.itemimg{
位置：绝对位置；
最高：50%；
左-500%；
转换：翻译（-50%，-50%）；
高度：85px；
利润上限：-8px；
z指数：-1651651651；
}
@TuckerRitti-您在问题中没有提到jQuery，也没有提到任何关于ID的内容。找不到ID与元素在页面上的位置无关。这绝对是一个错误；与您最初要求的不同。我建议你为此提出一个新问题，特别是提到你真正想要达到的目标。我的回答显示了如何将图像放置在
下方，这正是您所要求的。