固定定位

最新推荐文章于 2022-07-24 18:32:36 发布

超超.

最新推荐文章于 2022-07-24 18:32:36 发布

阅读量320

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/peichaohang/article/details/85298351

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

position：fixed固定定位

固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：

固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定定位</title>
	<style type="text/css">
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: yellow;
			position: fixed;
			left: 0px;
			top: 0px;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: yellowgreen;
		}
	</style>
</head>
<body style="height: 5000px;">
	<div class="box1"></div>

	<div class="box4" style="width: 300px; height: 300px; background-color: orange; position: relative;">
		<div class="box2"></div>
	</div>

	<div class="box3"></div>
</body>
</html>