Html 将图像放置在div上

我一直在尝试在一个div上放置一个图像，我的div是

.my_box{
position: relative;
left: 200px;
width: 200px;
height: 200px;
background-color: white;
opacity: 0.7; 
}

然后我的形象是

.asvp{
position:relative;
left: 300px;
top: 100px;

}

当我这样做是把图像放在div下面，我该怎么做才能把它放在div上面？我知道要将图像放入div，但这会影响图像的不透明度，这是我不想要的。

尝试将z-index:1添加到.my_框，将z-index:10添加到.asvp。但是如果没有HTML代码就很难实现。如果这不起作用，请创建一个JSFIDLE，我会帮你解决

---

您还应该使用边距，而不是左上角。例如，在.asvp上删除左侧和顶部并放置边距：100px 0 300px；。作为一般的经验法则，我只使用左、右、上、下绝对元素。

为什么不给出图像位置：绝对；相反这将自动将图像置于其顶部，而不是重新定位，您可以将图像保持在div内，而不受其不透明度影响其内容。如果像您的示例中那样是实心半透明背景，则可以在div上使用rgba值，如下所示：

background-color: rgba(255,255,255,0.7);

此选项和其他选项如下：

---

您仍然需要对div进行z索引，或者对HTML重新排序。但我们不知道这是什么顺序。但是是的，他应该使用绝对位置。然后顶部：0；左：0；等等.“z-index.谢谢你的回答，你能给我解释一下z-index的作用吗？”？而且，它不工作：/实际上它工作了！！谢谢您的回答，非常感谢！：你还可以解释一下z指数的作用吗？因为我想从中学习！没问题！很高兴我能帮忙。我很难解释，但本质上，它允许您重新排序/设置已定位HTML元素的顺序。这里有一个很好的解释：基本上，你会说z索引的工作原理与photoshop中的图层类似吗？