网页基础（二十四）固定定位

最新推荐文章于 2023-03-04 11:25:32 发布

@大娱乐家

最新推荐文章于 2023-03-04 11:25:32 发布

阅读量429

点赞数

本文链接：https://blog.csdn.net/qq_41440413/article/details/104670319

版权

固定定位 fixed 表示固定定位
               * 相对于浏览器窗口进行定位
               * 固定定位也是一种绝对定位只是他的参照物是body
               * 只要开启了定位就会产生层级关系

应用于跟随网页上下滑动的固定广告位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>固定定位</title>
		<style>
			.c1{
				width: 200px;
				height: 200px;
				background-color: #800080;
			}
			.c2{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
				/*
				 * fixed 表示固定定位
				 * 相对于浏览器窗口进行定位
				 * 固定定位也是一种绝对定位 只是他的参照物是body
				 * 只要开启了定位 就会产生层级关系
				 * 
				 */
				position: fixed;
				left: 0px;
				top: 300px;
				
			}
			.c3{
				width: 200px;
				height: 200px;
				background-color: #880000;
			}
		</style>
	</head>
	<body style="height: 5000px;">
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
	</body>
</html>