但是层级没有解决，会被navtop给挡住呢。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5-2jq</title>
<link rel="stylesheet" href="css/5-2JQ.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/5-2JQ.js"></script>
</head>
<body>
<div class="main" id="main">

<div class="head">
<div class="top" id="top">
<div class="login">
<a class="logina" href="javascript:void(0)">亲，请登录！</a>
<a href="#">快速注册</a>
<a href="#">手机逛慕淘</a>
</div>
<div class="topNav">
<div class="topNav1">
<div class="get">我的慕陶<i class="fa fa-angle-down fa-lg" aria-hidden="true"></i>
<div class="hideTitle">
<div>买到的宝贝</div>
<div>我的足迹</div>
</div>
</div>
</div>
<div class="topNav1">
<div class="get">我的收藏<i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></div>
<div class="hideTitle">
<div>收藏的宝贝</div>
<div>收藏的店铺</div>
</div>
</div>
<div class="topNav2">
<div>商品栏目</div>
</div>
<div class="topNav1">
<div class="get">卖家中心<i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></div>
<div class="hideTitle">
<div>卖出的宝贝</div>
<div>我的店铺</div>
<div>免费开店</div>
<div>体验中心</div>
</div>
</div>
<div class="topNav1">
<div class="get">联系客服<i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></div>
<div class="hideTitle">
<div>消费者客服</div>
<div>卖家客服</div>
</div>
</div>
</div>
</div>
<div class="hr"></div>

<div class="cover">

<div class="window">
<div class="windowTop">
<div class="WTleft">
<a class="active" href="javascript:void(0)">登陆</a>
<a href="javascript:void(0)">注册</a>
</div>
<div class="WTright"><img src="素材/icon/20.png" height="32" width="32"/></div>
</div>
<div class="windowBottom">
<input class="inp" name="username" type="text" placeholder="请输入登陆邮箱/手机号"><div class="inf1"></div>
<input class="inp" name="password" type="password" placeholder="6-16位密码区分大小写不能用空格"><div class="inf2"></div>
<br>
<input type="checkbox" checked="true"><span>下次自动登陆</span>         
                    
<span>忘记密码</span>
<a class="finlogin" href="javascript:void(0)">登陆</a>
<div class="imgIcon">
<div class="simgIcon"><img src="素材/icon/QQ.png" height="32" width="32"/></div>
<div class="simgIcon"><img src="素材/icon/weixin.png" height="32" width="32"/></div>
<div class="simgIcon"><img src="素材/icon/xinlang.png" height="32" width="32"/></div>
</div>
</div>
</div>
</div>

<div class="logoPart">
<img src="素材/logo.png" height="48" width="136"/>
<div class="search">
<input type="text">
<a href="#">搜索</a>
</div>
<div class="chart">
购物车 | 0<img src="素材/icon/26.png" height="16" width="16"/><i class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>

<div class="navigator">
<div class="naTop">
<div class="naItems">
<a>数码城</a><a>天黑黑</a><a>团购</a><a>发现</a><a>二手特价</a><a>名品特惠</a>
</div>
</div>
<div class="naBottom">
<div class="navTLeft"></div>
<div class="navTMiddle">
<div class="pics showThis"><img src="素材/focus-carousel/1.png" height="504" width="728"/></div>
<div class="pics"><img src="素材/focus-carousel/2.jpg" height="454" width="730"/></div>
<div class="pics"><img src="素材/focus-carousel/3.jpg" height="454" width="730"/></div>
<div class="pics"><img src="素材/focus-carousel/4.jpg" height="454" width="730"/></div>
<div class="pics"><img src="素材/focus-carousel/6.jpg" height="454" width="730"/></div>
<div class="pics"><img src="素材/focus-carousel/1.jpg" height="454" width="730"/></div>
</div>
<div class="navTRight"></div>
</div>
</div>
</div>


<div class="window1" style="display: none">
<div class="windowTop">
<div class="WTleft">
<a href="javascript:void(0)">登陆</a>
<a class="active" href="javascript:void(0)">注册</a>
</div>
<div class="WTright"><img src="素材/icon/20.png" height="32" width="32"/></div>
</div>
<div class="windowBottom">
<input class="inp" name="username" type="text" placeholder="请输入注册邮箱/手机号"><div class="inf1"></div>
<input class="inpu" name="passwords" type="text" placeholder="请输入验证码">     <img src="素材/verify.png" height="40" width="70"/>
<div class="inf2"></div>
<br>
<a class="finlogin" href="javascript:void(0)">注册</a>
<div class="imgIcon">
<div class="simgIcon"><img src="素材/icon/QQ.png" height="32" width="32"/></div>
<div class="simgIcon"><img src="素材/icon/weixin.png" height="32" width="32"/></div>
<div class="simgIcon"><img src="素材/icon/xinlang.png" height="32" width="32"/></div>
</div>
</div>
</div>
<div class="popChart" style="display: none">
<div class="popChartA">最新加入的商品</div>
<div class="popChartB">
<div class="b1"><img src="素材/cart/1.png" height="48" width="49"/><span>衣服裤子鞋         x</span><br><span class="min">￥199x4</span></div>
<div class="b2"><img src="素材/cart/2.png" height="48" width="49"/><span>化妆品                x</span>
<br><span class="min">￥199x4</span></div>
<div class="b3"><img src="素材/cart/3.png" height="48" width="49"/><span>数码                   x</span>
<br><span class="min">￥199x4</span></div>
<div class="b4"><img src="素材/cart/4.png" height="48" width="49"/><span>家具                   x</span>
<br><span class="min">￥199x4</span></div>
<div class="b5"><img src="素材/cart/5.png" height="48" width="49"/><span>玩具                   x</span>
<br><span class="min">￥199x4</span></div>
<div class="b6"><img src="素材/cart/book.jpg" height="50" width="50"/><span>书                      x</span>
<br><span class="min">￥199x4</span></div>
<div class="b7"><img src="素材/cart/1.png" height="48" width="49"/><span>衣服裤子鞋         x</span><br><span class="min">￥199x4</span></div>
<div class="b8"><img src="素材/cart/2.png" height="48" width="49"/><span>化妆品                x</span>
<br><span class="min">￥199x4</span></div>
<div class="b9"><img src="素材/cart/3.png" height="48" width="49"/>数码                   x</span>
<br><span class="min">￥199x4</span></div>
<div class="b10"><img src="素材/cart/4.png" height="48" width="49"/><span>家具                   x</span>
<br><span class="min">￥199x4</span></div>
</div>
<div class="popChartC">
<span>共27件商品，总计：￥0.00</span><br><a>去结算</a>
</div>
</div>
</body>
</html>

//html代码部分

*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}/*所有的a标签取消下划线*/
.head{
background: #f3f5f7;
width: 100%;
overflow: hidden;
}/*top区和logo区整体背景设置*/
.top{
position: relative;
height: 48px;
width: 70%;
margin: 0 auto;
background:#f3f5f7;
color: #666666;
clear: both;
z-index: 99;
}/*top区*/
.login{
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0;
font-size: 15px;
}/*登陆区*/
.top a{
display: inline-block;
color:#666666;
width: auto;
height:40px;
line-height: 40px;
text-align: center;
padding: 4px;
margin-left: 20px;
}/*登陆区的a样式详情*/
.top a:hover{
color: red;
}/*a划过显示动画*/
.topNav{
float: right;
/*position: absolute;
top: 0;
right: 0;*/
font-size: 0;
clear: both;
}/*top区右导航*/
.topNav2,
.topNav1{
line-height: 40px;
float: left;
margin-right: 30px;
padding: 4px;
box-sizing: border-box;
font-size: 14px;
border: 1px solid transparent;
position: relative;
}
.get{
width: 70px;
}
.topNav1:hover{
background: white;
border: 1px solid #cccccc;
color: red;
}
.topNav2:hover{
color: red;
}
.topNav1:hover .hideTitle{
display:block;
color: #666666;
}/*css设置简单效果*/
.hideTitle{
height: auto;
font-size: 14px;
display: none;
position: absolute;
left: -1px;
top: 48px;
text-align: center;
background: #ffffff;
width: 100%;
z-index: 99;

}
.hideTitle div{
border: 1px solid #cccccc;
background: #ffffff;
width: 78px;
z-index: 99;
}
.hr{
border: 1px solid #cccccc;
box-sizing: border-box;
width: 70%;
margin: 0 auto;
}
/*top区包括注册和登陆以及右边的整体导航样式设置完成*/
.cover{
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 999;
display: none;
}
.window{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 360px;
height: 380px;
background: white;
border-radius: 2px;
}
.windowTop{
position: relative;
width: 300px;
height:60px;
margin: 10px auto;
}
.windowTop .WTleft{
float: left;
position: absolute;
height: 40px;
left: 0;
top: 50%;

margin-top: -20px;
text-align: center;
}
.windowTop .WTleft a{
display: inline-block;
line-height: 40px;
margin:0 10px;
color: #666666;
font-weight: bold;
font-size: 1.1em;
letter-spacing: 2px;
}
.windowTop .WTleft .active{
color: red;
border-bottom:2px solid red;
}
.windowTop .WTright{
position: absolute;
right: 10px;
top: 50%;
margin-top:-15px;
float: left;
}
.windowTop .WTright:hover{
cursor: pointer;
}
.windowBottom{
position: relative;
width: 300px;
margin: 20px auto;
height: 260px;
text-align: left;
}
.windowBottom span{
font-size: 14px;
}
.windowBottom .inp{
height: 30px;
width: 296px;
margin: 12px 0;
}
.windowBottom a{
position: absolute;
bottom: 50px;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
color: white;
border-radius: 5px;
background-color: orangered;
font-weight: bold;
font-size: 1.1em;
text-align: center;
}
.windowBottom .imgIcon{
position: absolute;
bottom: 0;
left: 50%;
width: 80%;
margin-left: -120px;
text-align: center;
}
.simgIcon{
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
background: #666666;
margin: 0 12px;
}
.windowBottom .simgIcon:hover{
background-color: green;
cursor: pointer;
}
.windowBottom span:hover{
cursor: pointer;
}
/*登陆页面弹出层*/
.window1{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 360px;
height: 340px;
background: white;
border-radius: 2px;
z-index: 9999;
}/*
.windowTop{
position: relative;
width: 300px;
height:60px;
margin: 10px auto;
}
.windowTop .WTleft{
float: left;
position: absolute;
height: 40px;
left: 0;
top: 50%;

margin-top: -20px;
text-align: center;
}
.windowTop .WTleft a{
display: inline-block;
line-height: 40px;
margin:0 10px;
color: #666666;
font-weight: bold;
font-size: 1.1em;
letter-spacing: 2px;
}
.windowTop .WTleft .active{
color: red;
border-bottom:2px solid red;
}
.windowTop .WTright{
position: absolute;
right: 10px;
top: 50%;
margin-top:-15px;
float: left;
}
.windowTop .WTright:hover{
cursor: pointer;
}
.windowBottom{
position: relative;
width: 300px;
margin: 20px auto;
height: 260px;
text-align: center;
}
.windowBottom span{
font-size: 14px;
}*/
.windowBottom .inpu{
height: 30px;
width: 180px;
margin: 12px 0;
}
.window1 .windowBottom a{
position: absolute;
bottom: 90px;
display: block;
width: 100%;
height: 40px;
line-height: 40px;
color: white;
border-radius: 5px;
background-color: orangered;
font-weight: bold;
font-size: 1.1em;
}
.window1 .windowBottom .imgIcon{
position: absolute;
bottom: 40px;
left: 50%;
width: 80%;
margin-left: -120px;
text-align: center;
}
/*.simgIcon{
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
background: #666666;
margin: 0 12px;
}
.windowBottom .simgIcon:hover{
background-color: green;
cursor: pointer;
}
.windowBottom span:hover{
cursor: pointer;
}
*/
/*注册页面弹出层*/
.logoPart{
width: 70%;
height: 138px;
margin: 0 auto;
padding: 40px;
box-sizing: border-box;
position: relative;
z-index: 9;
}
.logoPart img{
position: absolute;
top: 40px;
left: 0;
}/*logo区左侧图片定位*/
.logoPart .search{
position: absolute;
top: 46px;
left: 50%;
margin-left: -200px;
}/*logo区search大框定位*/
.logoPart .search a{
display: block;
float: right;
background: black;
color: white;
text-align: center;
line-height: 40px;
width: 80px;
height: 40px;
}
.logoPart .search a:hover{
cursor: pointer;
}
.logoPart .search input{
height: 36px;
width: 400px;
}/*样式设置*/
.logoPart .chart{
position: absolute;
text-align: right;
color: white;
top: 46px;
height: 40px;
line-height: 40px;
width: 15%;
right: 0;
background: red;
}/*购物车定位*/
.chart img{
top:50%;
margin-top: -8px;
left: 10px;
}
.chart i{
display:block;
float: right;
margin-right: 10px;
margin-top: 3%;
height: 80%;
width: 28px;
}/*head区包括顶部加收索栏样式设置以及弹出层页面设置全部样式*/
.popChart{
position: fixed;
top: 137px;
right: 146px;
height: 300px;
width: 200px;
background: white;
border:1px solid #cccccc;
}
.popChartA{
font-size: 15px;
padding: 10px;
font-weight: bold;
}
.popChartB{
height: 190px;
padding: 10px;
overflow:auto;
}
.popChartB div{
width: 100%;
float: left;
text-align: left;
font-size: 13px;
line-height: 24px;
padding: 2px;
border-bottom: 2px solid #cccccc;
}
.popChartB div:hover{
background: #cccccc;
}
.popChartB .min{
font-size: 10px;
}

.popChartB div img{
float: left;
}
.popChartC{
height: 48px;
padding:2px;
}
.popChartC span{
font-size: 8px;
}
.popChartC a{
display:block;
width: 40%;
height: 26px;
margin: 0 auto;
text-align: center;
background: orangered;
color: white;
border-radius: 5px;
}
/*购物篮结算清单样式*/
.naTop{
width: 100%;
height: 60px;
background: black;
}
.naTop a{
color:white;
line-height: 60px;
font-size: 1em;
font-weight: bold;
margin-right:30px;
}