关于相对定位和绝对定位出现的问题

class=“right” 的div 里包含一个 span

我是想让把div设为相对定位，把span设为绝对定位，right=20px ,top=0,如下图所示：

但是当我鼠标移入span时，span的位置发生偏移、？？如下图所示：

这是什么原因造成的？？我并没有设置鼠标移入改变它位置的样式

详细代码如下：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/iconfont/iconfont.css">
    <link rel="stylesheet" href="CSS/index.css">
    <link rel="stylesheet" href="CSS/init.css">
</head>
<body>
<header>
    <div class="type_area">
        <ul class="left">
            <li><a href="">小米商城</a></li>
            <li><a href="">MIUI</a></li>
            <li><a href="">loT</a></li>
            <li><a href="">云服务</a></li>
            <li><a href="">天星数科</a></li>
            <li><a href="">有品</a></li>
            <li><a href="">小爱开放平台</a></li>
            <li><a href="">企业团购</a></li>
            <li><a href="">资质证照</a></li>
            <li><a href="">协议规则</a></li>
            <li><a href="">下载app</a></li>
            <li><a href="">智能生活</a></li>
            <li class="right_last"><a href="">Select Location</a></li>
        </ul>
        <div class="right">
            <div class="iconfont icon-gouwuche icon_span"><span>&nbsp;&nbsp;购物车（0）</span></div>
        </div>

    </div>
</header>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
img {
    vertical-align: middle;
}
span {
    display: inline-block;
}
a {
    text-decoration: none;
}

/*版心*/
.type_area {
    margin: auto;
    width: 1200px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.right_last {
    border-right: 0;
}
/*头部*/
header {
    height: 40px;
    background: #333;
}
header a {
    color: #B0B0B0;
}
header li a:hover {
    color: #fff;
}
header li {
    float: left;
    margin-top: 12px;
    padding: 0 7px;
    font-size: 12px;
    color: #B0B0B0;
    border-right: 2px solid #3E423B;
}

header .right {
    position: relative;
    width: 320px;
    height: 140px;
    background: pink;
}
header .icon_span {
    position: absolute;
    top: 0;
    right: 0px;
    display: inline-block;
    margin-left: 25px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #B0B0B0;
}
header .right .icon_span:hover {
    position: relative;
    background: #fff;
    color: #FF6700;
}
header .icon_span span {
    font-size: 12px;
}

你不是设置了 hover属性吗，鼠标悬浮时position值变了呀

如果我没看错，你怕是定位和浮动的冲突

麻烦给我点赞！！！老铁666