CSS：顶部导航栏固定位置、分类标题栏、底部提示文案固定位置

最新推荐文章于 2025-09-25 19:18:51 发布

原创

最新推荐文章于 2025-09-25 19:18:51 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

一、效果图

页面body的css代码

body {
   
   
	position: absolute;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	bottom: 0;
	background-color #eee;
	/* overflow: auto;
	overflow-y: scroll; */

	/* ::-webkit-scrollbar {
   
   
		display: none;
	} */
}

.content-root {
   
   
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	position: absolute;
	padding-bottom: 2.5rem;
	background-color: #7ddcf8;
}

二、顶部导航栏固定位置

页面内容可以上下滑动，顶部导航栏始终固定显示在顶部

css代码

.tool-bar {
   
   
	width: 100%;
	height: 3.125rem;
	display: flex;
	/* 固定位置 */
	position: fixed;
	background-color: aqua;
	padding-left: 1rem;
	padding-bottom: 0.9375rem;
	/* 数值越大，表示越会显示在其他堆叠元素之上 */
	z-index: 999;
	align-items: flex-end;
	justify-content: space-between;
	box-sizing: border-box;
}

.back-img {
   
   
	width: 1.875rem;
	height: 1.25rem;
	margin-left: 0.16rem;
}

.title {
   
   
	position: absolute;
	font-family: PingFangSC, PingFang SC;
	font-size: 1.25rem;
	left: 50%;
	transform: translate(-50%, 0);
	text-align: center;
}

.search {
   
   
	position: absolute;
	right: 1rem;
	width: 1.25rem;
	height: 1.25rem;
}

三、分类标题栏

一般项目首页分类列表里的item会显示该类型的标题和一行描述，右边显示icon表示点击可查看更多

css代码

.list-root {
   
   
	/* 100%的宽度，减去左右边距的总和 */
	width: calc(100% - 32px);
	height: 11.25rem;
	position: relative;
	margin-top: 1rem;
	margin-left: 1rem;
	/* 左右边距 这里注释掉因为 上面 margin-top， 具体根据实际页面样式进行设置 */
	/* margin: 0 16px; */
	border-radius: 0.5rem;
	background-color: white;
}

.top-type {
   
   
	width: 100%;
	height: 3.125rem;
	background-color: aqua;
	border-top-left-radius: