CSS：防止绝对图像扩展到特定的div

Question

有没有办法阻止绝对放置的图像扩展到某些元素？

原因：我允许用户通过添加图片来自定义他们的网站。但是，他们可以将图像放置在覆盖表单按钮的位置 - 然后他们就无法再将其删除。

#parent{
    position:relative;
}

#my_img {
    position:absolute; 
    # top, left can be anything
}


<div id = "parent">
    <img id = "my_img" src = "my_pic.jpg" >
</div>
<div id = "other_div">
    I always want to see this text regardless of my_img top and left
</div>

Answer 1

确定html元素的排列顺序，而不是文档结构，您需要定位元素（相对，绝对或固定）并为元素赋予z-index值。

此外，您需要将至少顶部/底部和左/右分配给定位元素，以防止旧IE版本出现问题。

#other_div {
    position: relative;
        top: 0;
        left: 0;
    z-index: 1337;
}