定位:position
1 position:relative:相对定位
在使用相对定位的情况下,不添加偏移量定位元素部发生变化且根据自身定位
相对定位会占据原来位置不脱离文档流和文本流
2 绝对定位 position:absolute
绝对定位脱离文本 文档流
当没有父级或且父级没有定位,则根据窗口定位
当父级有定位,则根据父级定位
3 固定定位 fixed
根据窗口定位 定位后就固定不动了
固定定位脱离位文本文档流
4 粘性定位position:sticky
粘性定位刚开始没达到阀值之前,在自己原来位置类似相对定位
当阀值达到时,变成固定定位,根据父元素定位
z-index调层级 元素必须有定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#box1{
width: 200px;
height: 510px;
background-color: rgb(61, 164, 17);
margin: 20px 50px;
}
#box1>ul>li{
list-style: none;
width: 200px;
height: 85px;
line-height: 85px;
text-align: center;
font-size: 25px;
font-family: "黑体";
}
#box1>ul>li:hover{
background-color:gray;
}
#box2{
width: 800px;
height: 510px;
background-color: rgba(250, 246, 246, 0.5);
/* display: none; */
position: absolute;
top: 0px;
left: 200px;
display: none;
}
#box1>ul>li:nth-child(1):hover #box2{
display: block;
}
.box1{
position: relative;
}
.box3{
position: relative;
}
.box2{
margin: 0px 0px;
position: absolute;
width: 800px;
height: 510px;
border: 1px solid black;
display: none;
top: -85px;
left: 200px;
background-color: rgba(255,255,25,0.5);
}
#box1>ul>li:nth-child(2):hover .box2{
display: block;
}
#box2>ul>li{
list-style: none;
height: 30px;
line-height: 30px;
text-align: center;
width: 150px;
float: left;
font-size: 14px;
font-family: "楷体";
}
#box2>ul{
float: left;
width: 800px;
height: 50px;
}
</style>
</head>
<body>
<div id="box1">
<ul>
<li class="box1">全部商品分类
<div id="box2">
<ul>
<li>绿茶</li>
<li>西湖龙井</li>
<li>黄山毛峰</li>
<li>安吉白茶</li>
<li>3151351</li>
</ul>
<ul>
<li>乌龙茶</li>
<li>铁观音</li>
<li>大红袍</li>
<li>水仙</li>
<li>肉桂</li>
</ul>
<ul>
<li>红茶</li>
<li>正山小种</li>
<li>祁门红茶</li>
<li>金骏眉</li>
<li>坦洋工夫</li>
</ul>
<ul>
<li>黑茶</li>
<li>白沙溪黑茶</li>
<li>普洱茶饼</li>
<li>普尔砖茶</li>
<li>普洱沱茶</li>
</ul>
<ul>
<li>品牌</li>
<li>元戎</li>
<li>顶峰</li>
<li>公孡</li>
<li>一品堂</li>
</ul>
<ul>
<li>价格</li>
<li>100元以下</li>
<li>100-300元</li>
<li>300元以上</li>
</ul>
<ul>
<li>净含量</li>
<li>50g以下</li>
<li>51-100g</li>
<li>101-250g</li>
<li>250g以上</li>
</ul>
<ul>
<li>包装</li>
<li>经济自饮装</li>
<li>精品礼盒装</li>
</ul>
<ul>
<li><img src="../img/5.jpg" alt="" width="800px"></li>
</ul>
</div>
</li>
<li class="box3">商店
<div class="box2">
</div>
</li>
<li>咨询</li>
<li>联系方式</li>
<li>关于我们</li>
<li>帮助</li>
</ul>
</div>
</body>
</html>