javascript - 如何防止图像相互重叠

Question

我在父 div 的右上角有一个垃圾桶图标的 png:

<div id="image_part">//width: 700, height:500

    <img id="preview_pic" alt="" src=""> //this is where I load image
    <img style="float:right;cursor:pointer; margin-top:10px;margin-right:10px;" title="delete this photo" src="img/trashcan1_icon.png" height="20" width="20">

    </div>

当我加载图像时，如果图像尺寸小于其父尺寸(即 image_part)，则图像应位于 div image_part 的中心，并且两者之间仍有边距div image_part 以及图像和垃圾桶可见。但是，如果图像大到足以占据所有 parent div image_part 而没有任何边距或空间，那么垃圾桶图标就会变得不可见。我想要的是垃圾桶图标位于图像本身的顶部。

Answer 1

您应该适本地将图像的大小绑定(bind)到最大值:使用最大高度:500 像素，最大宽度:700 像素(或稍小的值，以便您有边距)。

您还可以在元素上使用 z-index - 要么给 preview_picture 一个负值，要么给 trashcan 一个正值(大于 1)。