【css基础】html图片右上角加上删除按钮

DOCTYPE  html>
< html >
< head >
     < meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
     < title > title >
     < meta  charset="utf-8" />
     < script  src="/Scripts/jquery-1.10.2.js"> script >
 
 
     < style  type="text/css">
         .imgDiv {
             display: inline-block;
             position: relative;
         }
 
             .imgDiv .delete {
                 position: absolute;
                 top: 0px;
                 right: 0px;
                 width: 50px;
                 height: 50px;
                 display: none;
             }
     style >
head >
< body >
 
     < script  type="text/javascript">
         $(document).ready(init);
         function init() {
             $(".imgDiv").mouseenter(function () {
                 $(this).find(".delete").show();
 
             });
 
 
             $(".imgDiv").mouseleave(function () {
                 $(this).find(".delete").hide();
             });
 
         }
 
 
 
     script >
     < div  class="imgDiv">
         < img  src="http://img.acgbz.com/Download/892/images/52321860_p0.jpg" />
         < a  href="#">
             < img  src="http://www.iconpng.com/png/sm-reflection-r/button-cross.png" class="delete" />
         a >
     div >
 
    
body >
html >


各位复制运行即可。

可以看到,这里采用的是css的position 的属性,absolute属性大家请查询 http://www.w3school.com.cn/cssref/pr_class_position.asp 的详细介绍,

布局方面想深入理解则可以点击此网站:http://zh.learnlayout.com/position.html

回到正题,这里使用absolute是因为右上角交叉图针对的是它的主图,而absolute则恰巧是针对它

因为:它不是相对于视窗而是相对于最近的“positioned”祖先元素


你可能感兴趣的:(css基础)