【CSS】position 定位和 z-index 层级

最新推荐文章于 2024-03-18 17:20:19 发布

一颗不甘坠落的流星

最新推荐文章于 2024-03-18 17:20:19 发布

阅读量3.2k

点赞数

分类专栏： CSS 笔记文章标签： relative absolute fixed sticky z-index

本文链接：https://blog.csdn.net/qq_45677671/article/details/122197423

版权

CSS 笔记专栏收录该内容

26 篇文章

订阅专栏

文章目录

position属性用于指定一个元素在文档中的定位方式。
top，right，bottom 和 left 属性则决定了该元素的最终位置。

语法：

 position：static/absolute/relative/fixed/sticky；

说明：

static（默认值）：
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。忽略任何top、bottom、left、right声明
absolute（绝对定位）：
相对于父级元素的绝对定位，浮出、脱离文档流，不占据空间，就是我们所说的层，其位置相对于最近的以定位父元素而言的位置，若父元素都没有定位，则以HTML（根元素）进行定位参考
relative（相对定位）：
相对于默认位置的偏移定位，通过设置left、top、right、bottom值可将其移至相对于其开始的位置发生位置上的移动，不会破坏正常的布局流
fixed（固定定位）：
相对于浏览器的绝对定位，不占位，是相对于浏览器窗口的指定坐标进行定位。不管窗口滚动与否，元素都会留在那个位置。无法和relative配合使用
sticky（粘性定位）：
相对于可视窗口定位，元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置

相对定位：relative

相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。
下面的例子中，注意未应用定位的其它元素是按照 “Two” 在正常位置的情况下进行布局的。

示例：相对自身定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		
		#two {
		  position: relative;
		  top: 20px;
		  left: 20px;
		  background: blue;
		}
	</style>
	<body>
		<div class="box" id="one">One</div>
		<div class="box" id="two">Two</div>
		<div class="box" id="three">Three</div>
	</body>
</html>

在这里插入图片描述

绝对定位：absolute

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。
在布置文档流中其它元素时，绝对定位元素不占据空间。
绝对定位元素相对于最近的非 static 祖先元素（上一级设置定位的元素）定位。
当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。
默认状态下，html就是一个大的包含块，所有绝对定位的元素都是根据窗口来定位自己所处的位置

示例：相对初始包含块定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		#one {
		  margin-left: 50px;
		}
		#two {
		  position: absolute;
		  width: 50px;
		  height: 50px;
		  top: 0px;
		  left: 0px;
		  background: blue;
		}
	</style>
	<body>
		<div class="box" id="one">
			One
			<div class="box" id="two">Two</div>
		</div>
	</body>
</html>

在这里插入图片描述

示例：相对已定位元素定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		/* 已设置定位的祖先元素 */
		#one {
		  position: relative;
		  margin-left: 50px;
		}
		#two {
		  position: absolute;
		  width: 50px;
		  height: 50px;
		  top: 20px;
		  left: 20px;
		  background: blue;
		}
	</style>
	<body>
		<div class="box" id="one">
			One
			<div class="box" id="two">Two</div>
		</div>
	</body>
</html>

在这里插入图片描述

固定定位：fixed

固定定位与绝对定位相似，但元素的包含块为 viewport 视口。
该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		#two {
		  position: fixed;
		  width: 50px;
		  height: 50px;
		  top: 0px;
		  right: 0px;
		  background: blue;
		}
	</style>
	<body>
		<div class="box" id="two">Two</div>
	</body>
</html>

在这里插入图片描述
页面滚动时，位置相对于可视窗口保持不变

示例：让一个元素始终在窗口水平、垂直位置居中

/*方法一*/
div{
	width:200px;
	height:200px;
	background:red;
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}
/*方法二*/
div{
	width:200px;
	height:200px;
	background:red;
	position:fixed;
	left:50%;
	top:50%;
	margin-top:-100px;
	/*相对于减自身高度的一半，找高度的中心点*/
	margin-left:-100px;
	/*相对于减自身宽度的一半，找宽度的中心点*/
}

粘性定位：sticky

粘性定位可以被认为是相对定位和固定定位的混合。
元素在跨越特定阈值前为相对定位，之后为固定定位。
须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。
否则其行为与相对定位相同

#one { position: sticky; top: 10px; }
/*
	在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。
	之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下
*/

示例：改变可视窗口的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.box {
		  display: inline-block;
		  width: 100px;
		  height: 100px;
		  background: red;
		  color: white;
		}
		#one { 
		  margin-left: 50px;
		}
		#two {
		  display: block;
		  width: 50px;
		  height: 50px;
		  position: sticky;
		  bottom: 0px;
		  background: blue;
		}
	</style>
	<body>
		<div class="box" id="one">
			One
		</div>
		<div class="box" id="two">Two</div>

	</body>
</html>

在这里插入图片描述

设置定位元素的层级：z-index

z-index 属性设置元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

语法：

{
	z-index：auto | number；
}

参数说明：

- auto：	默认值
- number：	无单位的整数值，可为负数，数值越大，层越靠上

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div {
			margin-left: 100px;
			width: 50px;
			height: 75px;
			background: pink;
			position:absolute;
			left:0px;
			top:0px;
			z-index:-1
		}
	</style>
	<body>
		<section>
			<h1>z-index 属性用法</h1>
			<div></div>
			<p>z-index 默认值是 0，Z-index -1 拥有更低的优先级</p>
			<script type="text/javascript">
			</script>
	</body>
</html>

在这里插入图片描述

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div {
			margin-left: 100px;
			width: 50px;
			height: 75px;
			background: pink;
			position:absolute;
			left:0px;
			top:0px;
			z-index:1
		}
	</style>
	<body>
		<section>
			<h1>z-index 属性用法</h1>
			<div></div>
			<p>z-index 默认值是 0，Z-index 1 拥有更高的优先级</p>
			<script type="text/javascript">
			</script>
	</body>
</html>