css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别

绝对定位，相对定位，固定定位和粘性定位的特性及区别，我整理一下放在文章最下面了，不用死记硬背，理解一下就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><a