HTML之绝对定位position，fixed 百度搜索栏

最新推荐文章于 2023-06-04 22:58:10 发布

Modify_QmQ

最新推荐文章于 2023-06-04 22:58:10 发布

阅读量851

点赞数 1

分类专栏： # JS 文章标签： HTML之绝对定位position，fixed 百度搜索栏

本文链接：https://blog.csdn.net/qq_44973159/article/details/90812832

版权

JS 专栏收录该内容

13 篇文章 4 订阅

订阅专栏

绝对定位 position， fixed

首先了解一下绝对定位，是指在一个网页当中该模块不会随着网页的滚动而滚动
例如：百度的搜索，百度的这一个模块是不会滚动的
在这里插入图片描述
而这个具体怎么做呢？举一个简单的小例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>fixed</title>
	</head>
	<style type="text/css">
		#id1{
			width: 400px;
			height: 50px;
			background: springgreen;
			font-family: 华文行楷;
			font-size: 25px;
			float: left;
			position: fixed;<--在这个地方加入css的绝对定位属性即可-->
			margin-left: 30px;
			margin-top: 40px;
		}
		.div1{
			width: 500px;
			height: 900px;
			background: darkturquoise;			
		}
		.div2{
			width: 500px;
			height: 900px;
			background: bisque;
		}
	</style>
	<body>
		<div id="id1">fixed绝对定位</div>
		<div class="div1"></div>
		<div class="div2"></div>
	</body>
</html>

上面简单的定义了3个div块，而第一个div块是使用了绝对定位，其他两个div块将网页拉长或者拉宽，3个div块的颜色都不相同。不会随着网页的滚动而滚动，

最开始的效果未滚动

滚动后的效果

在这里插入图片描述
同理百度的搜索，本质上区别不大，自己再继续美化一下。

Modify_QmQ

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML之绝对定位position，fixed 百度搜索栏

绝对定位 position， fixed首先了解一下绝对定位，是指在一个网页当中该模块不会随着网页的滚动而滚动例如：百度的搜索，百度的这一个模块是不会滚动的而这个具体怎么做呢？举一个简单的小例子<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>fi...
复制链接

扫一扫