绝对定位，相对定位，固定定位和粘性定位的特性及区别，我整理一下放在文章最下面了，不用死记硬背，理解一下就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 href="#">游客</a></li>
							<li><a href="#">工作人员</a></li>
							<li><a href="#">管理层</a>
								<ul class="third">
									<li><a href="#">普通管理层</a></li>
									<li><a href="#">vip</a></li>
									<li><a href="#">svip</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">交流圈</a></li>
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
		</div>

2.固定定位（position: fixed;）并且，我们发现margin: 0 auto;失效了，也就是说，使用固定定位和绝对定位都会脱离标准文档流，使margin: 0 auto;失效。

效果图：

css全部代码：

* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: white;
			}

			.wrapper {
				width: 100%;
				height: 5000px;
				/* 圆形边框 */
			}
			/* .header{
				width: 100%;
				height: 500px;
				background-color: burlywood;
			} */

			 .box {
				width: 1250px;
				/* margin: 0 auto; */
				background-color: dimgray;
				height: 50px;
				border: 1px solid white;
				border-radius: 20px 20px;
				position:fixed;
				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="header"></div> -->
			<div class="box">
				<ul class="nav">
					<li><a href="#">首页</a></li>
					<li><a href="#">网上工作室</a>
						<ul class="second">
							<li><a href="#">游客</a></li>
							<li><a href="#">工作人员</a></li>
							<li><a href="#">管理层</a>
								<ul class="third">
									<li><a href="#">普通管理层</a></li>
									<li><a href="#">vip</a></li>
									<li><a href="#">svip</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">交流圈</a></li>
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
		</div>

当导航栏头部有其他模块，想要滑动过程中，导航栏滑动与顶部零间距之后固定。

使用粘性定位滑动过程中与页面顶端不会产生空间，但此时，如果使用固定定位，那就真的会栓Q了，问题不大，就是效果不一样，可以试试。

使用粘性定位效果图：

css代码：

* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: white;
			}

			.wrapper {
				width: 100%;
				height: 5000px;
				/* 圆形边框 */
			}
			.header{
				width: 100%;
				height: 500px;
				background-color: burlywood;
			}

			 .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="header"></div>
			<div class="box">
				<ul class="nav">
					<li><a href="#">首页</a></li>
					<li><a href="#">网上工作室</a>
						<ul class="second">
							<li><a href="#">游客</a></li>
							<li><a href="#">工作人员</a></li>
							<li><a href="#">管理层</a>
								<ul class="third">
									<li><a href="#">普通管理层</a></li>
									<li><a href="#">vip</a></li>
									<li><a href="#">svip</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">交流圈</a></li>
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
		</div>

相对定位： position: relative;

  •                           没有脱离标准文档流
  •                           层级自动提高，会覆盖浮动元素
  •                            left:距离左边移动
  •                            right:距离右边移动
  •                            top:距离上边移动
  •                            bottom:距离下边移动

绝对定位:position: absolute;

absolute 布局的关键点选择哪一个元素作为布局区域，如果元素的所有父元素均未设置 position 属性（值为 static），布局区域会选择可视区域。

  •                          如果祖先元素没有定位，相对于浏览器定位
  •                          如果祖先元素有定位,相对于"最近的"定位的祖先元素 定位
  •                          绝对定位会脱离标准文档流，影响下边的元素
  •                          绝对定位找参照祖先元素，应该用relative
  •                          经过绝对定位的元素会变成行内块元素

固定定位：position:fixed;

  • 不占据空间，固定定位是脱离标准流。
  • 以浏览器的可视窗口为参照点移动元素。
  • 跟父元素没有任何关系。
  • 不随滚动条滚动 

粘性定位：position:sticky;

  • 以浏览器的可视窗口为参照点移动元素。
  • 占有原先的位置。
  •  必须添加top、left、right、bottom其中一个才有效。
  • 兼容性差，IE不支持，不常用。
  • 粘性定位并不会 脱离文档流

层级关系 ：  定位层级>浮动层级>标准文档流的层级

# css # css3 # html
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

Handy 离线语音转写教程：免费开源，本地跑不连网

你肯定遇到过：语音输入 5 分钟，云转写服务要登录、要付费；或者出差没网，想口述一段会议纪要，发现全都没法用。Handy 离线语音转写工具就是为解决这个问题做的，声音全程不出你的电脑。## 🎯 这个工具是什么Handy 是一款免费、开源、跨平台（Windows / macOS / Linux）的离线语音转写应用。按住快捷键说话，松手后文字直接粘贴进任意输入框，全程不联网。核心能力就三条：

avatar 天工造物局

Supabase Edge Functions 编写与部署完整指南：Deno 运行时上的无服务器利器

Supabase Edge Functions 是基于 Deno 运行时编写、面向 Web 的无服务器函数服务，帮你把后端逻辑部署到全球边缘节点。作为 Postgres 开发平台的核心能力之一，它让你用 TypeScript 就能快速搭建低延迟的 API 端点、Webhook 接收器和 AI 集成服务，无需管理任何服务器。本文将从零带你完成一个 Edge Function 的创建、本地调试与全球部

avatar 天工造物局

celld从v0.1.0到v0.2.0为何不能滚动升级：两个破坏性变更详解

celld 是一个自托管、分布式的 Durable Objects 开源守护进程，它在你自己的机器上运行 Cloudflare Workers，每个对象对应一个独立的 SQLite 数据库，并持续复制到你自己拥有的 S3 兼容存储桶中。如果你正准备把 v0.1.0 的集群（fleet）升级到 v0.2.0，这篇文章必须先读：这次升级**不能滚动升级**，必须采用"先停光、再启动"的一次性发布方式。

avatar 天工造物局