CSS——绝对定位

最新推荐文章于 2025-05-17 22:49:43 发布

原创最新推荐文章于 2025-05-17 22:49:43 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

css

32 篇文章

订阅专栏

绝对定位比相对定位更灵活

脱标
绝对定位的盒子是脱离标准文档流的，所以所有的标准文档流的性质，绝对定位之后都不遵守了。绝对定位后，标签就不区分行内元素，块级元素了，不需要display: block;就可以设置宽高了。

	span{
		position: absolute;
		top: 100px;
		left: 100px;
		width: 100px;
		height: 100px;
		background-color: lightpink;
	}

参考点
如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。当position取值为absolute时，可以将元素的定位模式设置为绝对定位。

绝对定位的参考点如果用top描述，就是页面的左上角，而不是浏览器的左上角。
如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角。

以盒子为参考点
一个绝对定位的元素，如果父辈元素中出现了定位元素，那么将以父辈这个元素为参考点。

	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 400px;
			height: 400px;
			border: 10px solid red;
			margin: 100px;
		}
		p{
			width: 100px;
			height: 100px;
			background-color: orange;
			position: absolute;
			top: 40px;
			left: 40px;
		}
	</style>
</head>
<body>
	<div>
		<p></p>
	</div>
</body>

此时p的位置将以页面的左上角为40px，以浏览器当前屏幕为准对齐。

但是一旦给父辈加了相对定位，即：

		div{
			width: 400px;
			height: 400px;
			border: 10px solid red;
			margin: 100px;
			position: relative;
		}

此时将以父辈为参考，位置为父辈盒子中的向下40px，向右40px。

听最近的已经定位的祖先元素的：

<div class="box1">  相对定位
	<div class="box2">  没有定位
		<p></p>  绝对定位，则将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
	</div>
</div>

<div class="box1">  相对定位
	<div class="box2">  相对定位
		<p></p>  绝对定位，则将以box2为参考，因为box2是最近的父辈元素
	</div>
</div>

不一定是相对定位，任何定位都可以作为参考点

<div> 绝对定位
	<p></p> 绝对定位，则将以div作为参考点，因为父亲定位了。
</div>

子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。

<div class="box1">  绝对定位
	<div class="box2">  相对定位
		<div class="box3">  没有定位
			<p></p>  绝对定位 将以box2为参考单位
		</div>
	</div>
</div>

绝对定位的盒子居中
绝对定位之后所有标准流的规则都不适用了，所以margin: 0 auto; 失效。

	div{
		height: 200px;
		background-color: blue;
	}

块级元素不写宽则自动撑满，
但是如果绝对定位了：

	div{
		position: absolute;
		height: 200px;
		background-color: blue;
	}

则宽度失效了。
所以宽度可以写称width: 100%;

标准文档流中此盒子可以居中：

	div{
		width: 600px;
		height: 60px;
		background-color: blue;
		margin: 0 auto;
	}

但是如果position: absolute; 则不能通过标准文档流居中。
则通过以下设置可以居中：left 50%父盒子一半的大小，再走自己外边距负的一半值margin-left

	div{
		width: 600px;
		height: 60px;
		position: absolute;
		left: 50%;
		top: 0;
		margin-left: -300px;
	}