绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看。
当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法
1.粘性定位(position: sticky;)
效果图:
css全部代码:
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
.wrapper {
width: 100%;
height: 5000px;
/* 圆形边框 */
}
.box {
width: 1250px;
margin: 0 auto;
background-color: dimgray;
height: 50px;
border: 1px solid white;
border-radius: 20px 20px;
position: sticky;
top: 0;
/* 固定在距离顶部0px处 */
}
.box>ul>li {
float: left;
position: relative;
}
.nav {
width: 1200px;
margin: 0 auto;
}
.box ul li {
height: 50px;
line-height: 50px;
width: 200px;
background-color: dimgrey;
text-align: center;
font-weight: bolder;
border-radius: 20px 20px;
}
.nav li:nth-of-type(2) ul {
display: none;
/* 隐藏二级菜单*/
position: absolute;
}
.nav li:hover>a {
color: darkred;
}
/* 鼠标悬浮字体变色 */
.nav li:nth-of-type(2):hover .second {
display: block;
/* 鼠标悬浮显示二级菜单*/
}
.third {
position: absolute;
top: 100px;
left: 200px;
display: none;
/* 隐藏三级菜单 */
}
.second li:nth-of-type(3):hover ul {
display: block;
/* 鼠标悬浮显示三级菜单*/
}
html:全部代码
<div class="wrapper">
<div class="box">
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">网上工作室</a>
<ul class="second">
<li>&l