javascript - how to prevent image from overlapping each other -
i have png of trashcan icon @ right top of parent div:
<div id="image_part">//width: 700, height:500 <img id="preview_pic" alt="" src=""> //this load image <img style="float:right;cursor:pointer; margin-top:10px;margin-right:10px;" title="delete photo" src="img/trashcan1_icon.png" height="20" width="20"> </div>
when load image, if image size smaller parent size(which image_part), image should @ center of div image_part, , still have margin between div image_part , image , trashcan visible. however, if image big enough occupy parent div image_part without margin or space, trashcan icon becomes invisible. want trashcan icon @ top of image itself.
you should propably bind size of image maximum: use max-height: 500px, max-width: 700px (or smaller values have margin).
you can use z-index on elements - either give preview_picture negative value or trashcan positive 1 (bigger 1).
Comments
Post a Comment