CSS盒子模型之元素的定位position

啥都不会的码字人

已于 2023-06-26 17:24:00 修改

阅读量929

点赞数

文章标签： css 前端 html

于 2023-06-26 17:20:51 首次发布

本文链接：https://blog.csdn.net/m0_59717262/article/details/131396175

版权

文章详细介绍了CSS中的定位属性，包括静态定位、相对定位、绝对定位和固定定位的原理和用法，以及边位移属性和叠放次序z-index的概念，通过实例展示了各种定位模式的效果和相互影响。重点强调了定位模式的选择和z-index在解决元素重叠问题中的作用。

摘要由CSDN通过智能技术生成

在CSS页面布局时，通过position属性定义来设置元素的定位模式。

语法格式：position:static|relative|absolute|fixed;

1、定位的使用方式

定位=定位模式+边偏移

1.1、定位模式

（1）静态定位static：是元素的默认定位方式，各个元素遵循着HTML文档流中默认的位置。

（2）相对定位relative：表示它相对的参照物就是它在static状态下的位置，即以默认的位置为参照物进行位置的移动。

不完全脱离标准文档流，覆盖在其他盒子之上，其他盒子依旧认为它在，保留它的空间。

（3）绝对定位absolute：使用最多的属性之一，表示它相对于其上一个已经定位的父元素进行定位。不设置宽度就没有宽度。完全脱离文档流，不占据位置，其他元素会占据此空间，即对象发生位移时，原先初始位置的内容如同被去除了一样，这个对象独立于其他页面的内容，而初始位置的空白被其他内容自然填补。

注：a、如果没有祖先元素或者祖先元素没有定位，则以浏览器为原点

b、如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为原点移动位置(上级元素没有定位上上级有定位的话以上上级元素为原点)

使用口诀：子绝父相，即子级使用绝对定位，父级需要使用相对定位，因为父级需要占用位置，因此是相对定位，子级脱标浮在上面不需要占位置所以是绝对定位

（4）固定定位fixed：元素固定于浏览器中的某个位置，使用场景：浏览器页面滚动时位置不会改变。如某些广告。

特点：a、以浏览器可视窗口为原点移动元素

b、固定定位不占有原先位置

1.2、边位移属性

top	顶部偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

1.3、叠放次序z-index

当多个元素同时设置定位时，定位元素之间有可能发生重叠
要想调整重叠定位元素的堆叠顺序，可以对定位元素使用z-index层叠等级属性，其取值可为正整数、负整数、0.
注意：定位元素才有z-index

同级:

（1）不加z-index 后来者居上
（2）加z-index 值越大越在上面如果值相等还是后来者居上

嵌套:

（1）不加z-index 默认子元素在上
（2）只给子元素加z-index值<0 可实现父元素为上
（3）如果给父元素也添加z-index 父元素无论怎样子元素都将在父元素上

嵌套+同层级

（1）如果父元素有其他兄弟元素如果两者都没加z-index 后来者居上
（2）两者父元素都没加z-index 若某一子元素z-index值大那么该子元素将显示在上方如果值相同则后来者居上
（3）如果父级都加了z-index 那么在进行比较时只比较父元素z-index值值越大则父元素连同里面的子元素越靠上如果值相等后来者居上

注意：

数字后面不能加单位。

只有相对定位、绝对定位、固定定位有此属性，其余标准流、浮动、静态定位都无此属性。

flex盒子的子元素也可以设置z-index属性(可以自己了解)

2、元素定位使用讲解

2.1、静态定位（static）

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>静态定位</title>
		<link rel="stylesheet" href="../CSS/静态定位.css">
	</head>
	<body>
		<div id="father">
			<div class="box1">区块一</div>
			<div class="box2">区块二</div>
			<div class="box3">区块三</div>
		</div>
	</body>
</html>

CSS代码：

div {
	margin: 10px;
	padding: 5px;
	font-size: 12px;
	line-height: 25px;
}

#father {
	background-color: aqua;
	border: 1px #666 solid;
	padding: 0;
	/* static：静态定位，没有定位，默认值，元素按照标准文档流进行显示 */
	position: static;
}

.box1 {
	background-color: #f2bb6f;
	border: 1px #B55A00 dashed;
	position: static;
}

.box2 {
	background-color: #003580;
	border: 1px #0000A8 dashed;
	position: static;
}

.box3 {
	background-color: #f3f3f3;
	border: 1px #395E4F dashed;
	position: static;
}

效果图：

我们对四个盒子father、box1、box2、box3都设置了静态定位，但效果图与不设置静态定位时的效果图一样。注意：在静态定位状态下，无法通过边位移属性（top、right、bottom和left）来改变元素的位置。

2.2、相对定位

对于HTML代码不变，改变CSS代码，CSS代码如下：

div {
	margin: 10px;
	padding: 5px;
	font-size: 12px;
	line-height: 25px;
}

#father {
	background-color: aqua;
	border: 1px #666 solid;
	padding: 0;
}

.box1 {
	background-color: #f2bb6f;
	border: 1px #B55A00 dashed;
}

.box2 {
	background-color: #003580;
	border: 1px #0000A8 dashed;
	/* 设置相对定位 */
	position: relative;
	left: 1.25rem;
	top: 1.25rem;
}

.box3 {
	background-color: #f3f3f3;
	border: 1px #395E4F dashed;
}

效果图如下：

在CSS代码中，我对box2设置了相对定位，并且设置了相应的边位移属性，导致区块二以默认的位置为参照物进行相应的移动，但区块二默认的位置一直存在着，并没有因为本身的移动而消失，因此区块三并没有占据区块二的位置。

2.3、绝对定位

对于HTML代码不变，改变CSS代码，CSS代码如下：

div {
	margin: 10px;
	padding: 5px;
	font-size: 12px;
	line-height: 25px;
}

#father {
	background-color: aqua;
	border: 1px #666 solid;
	padding: 0;
	position: relative;
	top: 1.25rem;
}

.box1 {
	background-color: #f2bb6f;
	border: 1px #B55A00 dashed;
}

.box2 {
	background-color: #003580;
	border: 1px #0000A8 dashed;
	/* 设置绝对定位 */
	position: absolute;
	top: 1.5625rem;
	left: 1.5625rem;
	clear: both;
}

.box3 {
	background-color: #f3f3f3;
	border: 1px #395E4F dashed;
}

效果图如下：

在这里，我们按照规范对盒子father设置了相对定位，盒子box2设置了绝对定位，若不对盒子father设置相对定位，则区块二会依据浏览器窗口进行定位。

区块二原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样，会被其他内容所占据。box2定位后生成一个块级框，而不论原来它在正常文档流中生成何种类型的框。普通文档流中其它元素的布局就像绝对定位的元素不存在一样。

在这里我们会发现box2设置绝对定位后，其大小和原来相比发生了变化，这是因为box2并未设置宽度和高度，在原来正常文档流中，在不设置宽度、边距的情况下，块元素默认宽度为父级元素的100%，使用绝对定位后，使其完全脱离了原来正常的文档流，盒子宽度默认被内容所撑开，与浮动的效果一样。

2.4、固定定位

HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位</title>
		<link rel="stylesheet" href="../CSS/固定定位.css">
	</head>
	<body>
		<div id="father">
			<div class="box1">区块一</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			<div class="box2">区块二</div>
			<div class="box3">区块三</div>
		</div>
	</body>
</html>

CSS代码如下：

div {
	margin: 10px;
	padding: 5px;
	font-size: 12px;
	line-height: 25px;
}

#father {
	background-color: aqua;
	border: 1px #666 solid;
	padding: 0;
}

.box1 {
	background-color: #f2bb6f;
	border: 1px #B55A00 dashed;
}

.box2 {
	background-color: #003580;
	border: 1px #0000A8 dashed;
	/* 设置固定定位 */
	position: fixed;
	top: 1.25rem;
	left: 1.25rem;
}

.box3 {
	background-color: #f3f3f3;
	border: 1px #395E4F dashed;
}

效果图如下：

如图所示，随着滚动条的滚动，区块二一直处于浏览器窗口的固定位置，并不会随着滚动条的滚动改变其位置。

3、叠放次序z-index的使用

HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>叠放次序z-index</title>
		<link rel="stylesheet" href="../CSS/叠放次序z-index.css">
	</head>
	<body>
		<div id="father">
			<div class="box1">区块一</div>
			<div class="box2">区块二</div>
			<div class="box3">区块三</div>
		</div>
	</body>
</html>

CSS代码如下：

div {
	margin: 10px;
	padding: 5px;
	font-size: 12px;
	line-height: 25px;
}

#father {
	background-color: aqua;
	border: 1px #666 solid;
	padding: 0;
	position: relative;
	top: 1.25rem;
}

.box1 {
	background-color: #f2bb6f;
	border: 1px #B55A00 dashed;
}

.box2 {
	background-color: #003580;
	border: 1px #0000A8 dashed;
	/* 设置绝对定位 */
	position: absolute;
	top: 1.5625rem;
	left: 1.5625rem;
}

.box3 {
	background-color: #f3f3f3;
	border: 1px #395E4F dashed;
	/* 设置绝对定位 */
	position: absolute;
	top: 1.5625rem;
	left: 1.25rem;
}

效果图如下：

对box2和box3同时使用了绝对定位，导致其发生了重叠，由于box3为“后来者”，所以区块三在最上面。

设置属性叠放次序z-index。

CSS代码如下：

div {
	margin: 10px;
	padding: 5px;
	font-size: 12px;
	line-height: 25px;
}

#father {
	background-color: aqua;
	border: 1px #666 solid;
	padding: 0;
	position: relative;
	top: 1.25rem;
}

.box1 {
	background-color: #f2bb6f;
	border: 1px #B55A00 dashed;
}

.box2 {
	background-color: #003580;
	border: 1px #0000A8 dashed;
	/* 设置绝对定位 */
	position: absolute;
	top: 1.5625rem;
	left: 1.5625rem;
	z-index: 1;
}

.box3 {
	background-color: #f3f3f3;
	border: 1px #395E4F dashed;
	/* 设置绝对定位 */
	position: absolute;
	top: 1.5625rem;
	left: 1.25rem;
	z-index: 0;
}

效果图如下：