CSS中的position属性-优快云博客

本文详细解析了CSS中的定位属性position，包括static、absolute、fixed和relative四种类型，通过具体实例展示了不同定位方式的效果，有助于理解元素如何在页面中定位。

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

position定义：指定一个元素定位方法。

position属性值：static absolute fixed relative

static:默认值，没有定位。

absolute和fixed都为绝对定位：

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。（绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>）

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative:相对定位

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		div.aaa{
			background-color:blue;
			width: 300px;
			height:300px;
			border:5px solid gray;
			position:relative;  
		}
		div.bbb{
			background-color:red;
			width:200px;
			height:200px;
			border:5px solid gray;
			position: absolute;
			left:20px;
			top:20px;

		}
		div.ccc{
			background-color:yellow;
			width: :100px;
			height: 100px;
			border:5px solid gray;
			margin:10px;
		}
	</style>
</head>
<body>
<div class="aaa">
	<div class="bbb">
		<div class="ccc"></div>
	</div>
</div>
</body>
</html>