Css position 定位_减少大量的position-优快云博客

本文链接：https://blog.youkuaiyun.com/joys_wkx/article/details/102629342

本文深入解析CSS中的定位属性，包括static、relative、absolute和fixed四种类型，通过实例演示每种定位方式的效果，帮助读者掌握如何合理运用定位，提高网页布局效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定位

今天来写一个定位吧。定位说简单吧也不简单，但是要学好了也不难，合理运用定位，可以给我们减少很多的麻烦。

position 元素定位的类型

1、偏移属性：
a、left-------表示向右边偏移
b、right-------在右边时，则向左边偏移
c、top-------表示向元素的上方插入多少像素，使元素向下移动多少像素
d、buttom----------表示向元素的下方插入多少像素，使元素向上移动多少像素
2、取值
a、static 默认值（都说是默认值咯，就没有什么好说的了^_^）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px solid gainsboro;
			}
			.top{
				background-color: gold;
			}
			.main{
				background-color: forestgreen;
				position: static;
			}
			.buttom{
				background-color: rosybrown;
			}
		</style>
	</head>
	<body>
		<div class="top"></div>
		<div class="main"></div>
		<div class="buttom"></div>
	</body>
</html>

结果如图：
在这里插入图片描述

b、relative 相对定位：相对于自身源文档的位置为目标进行定位，占用源文档位置

.main{
				background-color: forestgreen;
				position: relative;
				left: 20px;
				top: 50px;
			}

结果为：
在这里插入图片描述
c、 absolute 绝对定位：是以最近的元素为目标，进行定位，若没有父元素，则以浏览器为目标来定位，并且完全不暂用位置，脱离了文档流

.main{
				background-color: forestgreen;
				position: absolute;
				left: 20px;
				top: 50px;
			}

结果如图：
在这里插入图片描述
d、fixed 固定定位：fixed相对于window固定，滚动、缩小都浏览器窗口并不会使其移动，会脱离文档流。
结果：
这个结果需要整个windom窗口进行放大缩小才能展示出结果，这里就不展示l