设置了定位的元素，无法遮盖。以及设置了left为0，但还是有1px的距离。为什么

来源：3-3 站点导航 CSS样式

平地一声雷d

2020-02-04 14:36:59

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/base.css">
<link rel="stylesheet" type="text/css" href="./css/common.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<section class="nav-top">
  <div class="wrap">
   <ul class="fl">
    <li class="nav-top-leftItem fl"><a href="#" target="_blank" class="nav-top-login link">亲，请登录</a></li>
    <li class="nav-top-leftItem fl"><a href="#" target="_blank" class="nav-top-register link">免费注册</a></li>
    <li class="nav-top-leftItem fl"><a href="#" target="_blank" class="nav-top-mobile link">手机逛慕淘</a></li>
   </ul>
   <ul class="fr nav-top-right">
    <li class="dropdown fl">
     <a href="#" target="_blank" class="link">我的慕淘<i class="circle"></i></a>
     <ul class="dropdown-layer dropdown-left">
      <li class="dropdown-layer-item"><a href="#" target="_blank" class="link">已买到的宝贝</a></li>
      <li class="dropdown-layer-item"><a href="#" target="_blank" class="link">我的足迹</a></li>
     </ul>
    </li>
    <li class="dropdown fl">
     <a href="#" target="_blank" class="link">收藏夹<i class="circle"></i></a>
     <ul class="dropdown-layer dropdown-left">
      <li class="dropdown-layer-item"><a href="#" target="_blank" class="link">已买到的宝贝</a></li>
      <li class="dropdown-layer-item"><a href="#" target="_blank" class="link">已买到的宝贝</a></li>
     </ul>
    </li>
    <li class="storm-sort fl"><a href="#" target="_blank" class="link">商品分类</a></li>
    <li class="dropdown fl">
     <a href="#" target="_blank" class="link">卖家中心<i class="circle"></i></a>
     <ul class="dropdown-layer dropdown-left">
      <li class="dropdown-layer-item"><a href="#" target="_blank" class="link">已买到的宝贝</a></li>
      <li class="dropdown-layer-item"><a href="#" target="_blank" class="link">已买到的宝贝</a></li>
     </ul>
    </li>
    <li class="dropdown fl">
     <a href="#" target="_blank" class="link ">联系客服<i class="circle"></i></a>
     <ul class="dropdown-layer dropdown-right">
      <li class="dropdown-layer-item"><a href="#" target="_blank" class="link">已买到的宝贝</a></li>
      <li class="dropdown-layer-item"><a href="#" target="_blank" class="link">已买到的宝贝</a></li>
     </ul>
    </li>
   </ul>
  </div>
</section>
</body>
</html>

base.css

/*css reset*/

/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
  padding: 0;
  margin: 0;
}
/*重置默认样式*/
body, button, input, select, textarea {
  /*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
  color: #333;
  font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}
em, i {
  font-style: normal;
}

a {
  text-decoration: none;
}
li {
  list-style-type: none;
  vertical-align: top;
}
img {
  border: none;
  /*display: block;*/
  vertical-align: top;
}
textarea {
  overflow: auto;
  resize: none;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/*常用公共样式*/
.fl {
  float: left;
  display: inline;
}
.fr {
  float: right;
  display: inline;
}
.cf:before,
.cf:after {
  content: " ";
  display: table;

}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}

common.css

.wrap{
margin: 0 auto;
}
.link{
color: #4d555d;
}
.link:hover{
color: #f01414;
}

index.css

/* nav-top left*/
.nav-top{
background: #f3f5f7;
}
.nav-top > .wrap{
width: 1200px;
height: 45px;
border-bottom: 1px solid #cdd0d4;
}
.nav-top-leftItem{
display: inline-block;
line-height: 45px;
}
.nav-top-login{
margin-left: 14px;
color: #f01414;
}
.nav-top-register,
.nav-top-mobile{
margin-left: 11px;
}

/* nav-top right*/
.nav-top-right{
margin-right: 14px;
}
.dropdown{
position: relative;
z-index: 2;
line-height: 45px;
padding: 0 14px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
cursor: pointer;
}
.storm-sort{
line-height: 45px;
margin: 0px 13px 0 11px;
}
.circle{
display: inline-block;
width: 8px;
height: 8px;
margin-left: 8px;
background: url("../img/dropdown-arrow.png") no-repeat;
}
.dropdown-layer{
position: absolute;
top: 43px;
z-index: 1;
border: 1px solid #cdd0d4;
}
.dropdown-layer-item{
display: block;
padding: 0 11px;
line-height: 27px;
white-space: nowrap;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}

/*nav-top下拉菜单*/
.dropdown:hover{
background: #fff;
border-color: #cdd0d4;
}
.dropdown:hover .dropdown-layer{
display: block;
}
.dropdown:hover .circle{
background: url("../img/dropdown-arrow-active.png") no-repeat;
}
.dropdown-layer-item:hover{
background: #cdd0d4;
}

写回答

1回答