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> 购物车（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;
}
