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

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -