CSS中关于定位的那些问题

最新推荐文章于 2025-06-24 00:35:55 发布

原创最新推荐文章于 2025-06-24 00:35:55 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html css

JS学习之专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了CSS中的四种定位方式：绝对定位、固定定位、相对定位和静态定位，并通过实例说明了每种定位方式的特点及常见误区。

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

今天在写一个页面的时候，想通过margin：0 auto;来对一个元素进行水平居中，结果发现无法实现，但是当我把定位改成绝对定位以后又可以实现了。然后我发现如果我想对绝对定位的元素实现水平居中的话除了设置margin：auto 以外还需要吧left和right都设置为0；

遂复习一下CSS里的定位

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

表来源于w3school

absolute不占用文档流，相对于父元素定位

relative占文档流，

默认的static无法设置left等属性

fixed相对于浏览器窗口定位

inherit是当前元素继承父元素的定位

关于相对定位想说一点小坑，，，刚学的时候被这个东西坑过。。。。。。感觉算是容易用错的东西吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			section{
				width: 200px;
				height: 200px;
				position: relative;
				border: 1px solid black;
			}
			.section_1{
				top: 100px;
			}
			.section_2{
			}
		</style>
	</head>
	<body>
			<section class="section_1"></section>
			<section class="section_2"></section>
	</body>
</html>

看这一段代码，还记得一开始的我天真的以为第二个section会紧跟在第一个section后面