## 特别注意
1. z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
2. 元素可拥有负的 z-index 属性值。（一般元素的z-index 属性值为0）
3. Z-index 仅能在定位元素上奏效。（例如 position:absolute;）

    <style>
        #div1 {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            background-color: white;
            display: block;
            position: absolute;
            right: 95px;
            top: 10px;
        }

        body #div1 img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
        }
    </style>
    <style type="text/css">

        .head-top-userdata {
            position: absolute;
            top: 45px;
            right: 5px;
            padding-top: 27px;
            display: none;
            text-align: center;
            z-index: 9999;
        }

            .head-top-userdata .userdeata-bg {
                width: 260px;
                height: auto;
                background: #fff;
                box-shadow: 2px 3px 5px #0000008f;
                position: relative;
                border-radius: 4px;
            }

        .userdeata-bg > span {
            position: absolute;
            display: inline-block;
            top: -18px;
            border: 10px solid #f660;
            border-bottom-color: #fff;
        }

        .userdata-meta {
            padding-top: 10px;
            font-size: 14px;
        }

            .userdata-meta span {
                display: block;
                line-height: 30px;
                color: #5d5d5d;
            }

                .userdata-meta span > em {
                    padding-left: 10px;
                    font-style: normal;
                }

                .userdata-meta span > .uservip-icon {
                    width: 20px;
                    height: 20px;
                }

        .uservip-0 {
            background-image: url(./images/vip-0.svg);
        }

        .uservip-icon {
            vertical-align: middle;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        .userdata-ul {
            height: 120px;
            border: 1px solid #ccc;
            border-left: none;
            border-right: none;
            padding: 5px 0;
            margin-top: 0px;
            margin-bottom: 0px;
        }

        .cl {
            zoom: 1;
        }

        .userdata-ul li {
            float: left;
            width: 50%;
            height: 35px;
            line-height: 35px;
            list-style-type: none;
            text-align: left;
        }

            .userdata-ul li a {
                padding: 0 20px;
                color: #333;
                display: inline-block;
                width: 100%;
                font-size: 14px;
            }

        a {
            text-decoration: none;
            outline: none;
            -webkit-transition: .5s;
            color: #333;
        }

        .userdata-out {
            background: #e8e8e8;
            border-radius: 0 0 4px 4px;
            line-height: 30px;
        }

            .userdata-out a {
                display: inline-block;
                width: 100%;
            }
    </style>
    <script>
        window.onload = function () {
            var Div1 = document.getElementById('div1');
            var Div2 = document.getElementById('div2');
            document.onclick = function (e) { //除了头像区域外点击触发
                if (!Div1.contains(e.target)) {
                    Div2.style.display = "none";
                }
            }
            Div1.onmouseover = function () { //鼠标移入触发
                Div2.style.display = "block";
            }
            //Div1.onmouseout = function () { //鼠标移出触发
            //    Div2.style.display = "none";
            //}
        };
    </script>



    <a href="#" id="div1"><img alt="" src="https://img-bss.csdn.net/2019624115611532_85755.jpg?imageMogr2/auto-orient/thumbnail/400x269!/format/jpg"/></a>
    <div id="div2" class="head-top-userdata">
        <div class="userdeata-bg">
            <span></span>
            <div class="userdata-meta">
                <span>水墨无痕<em>ID:1111</em></span>
                <span><i class="uservip-icon uservip-0"></i> 20</span>
            </div>
            <ul class="userdata-ul cl">
                <li><a href="/users?tab=index">个人主页</a></li>
                <li><a href="/users?tab=profile">设置</a></li>
                <li><a href="/users?tab=post">作品管理</a></li>
                <li><a href="/users?tab=circle">圈子动态</a></li>
                <li><a href="/users?tab=credit">我的钱包</a></li>
                <li><a href="/users?tab=orders">订单中心</a></li>
            </ul>
            <div class="userdata-out">
                <a href="https://www.ciyuanjie.cn/wp-login.php?action=logout&amp;redirect_to=%2F&amp;_wpnonce=26e59844a6">退出</a>
            </div>
        </div>
    </div>

效果图