【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”祖先元素