包含块、绝对定位中的坐标值、定位层叠、嵌套层叠、层叠包含框

本文链接：https://blog.csdn.net/qq_45929209/article/details/121664975

该博客详细介绍了CSS中的定位原理，包括如何确定包含块，绝对定位的坐标计算，以及层叠上下文（z-index）的工作方式。示例代码展示了如何实现垂直居中布局，以及通过设置z-index实现元素的层叠效果。此外，还探讨了嵌套定位元素的层叠规则和层叠包含框的概念，强调了外部相对定位与内部绝对定位的关系。

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

包含块

包含块
绝对定位中的坐标值
定位层叠（z-index）
嵌套层叠
层叠包含框

包含块

父节点，向上回溯，第一个有定位的（absolute、relative、fixed）
如果都没有，回溯到窗口
一种垂直居中的方法
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,div,h1,h2 {
				margin: 0;
				padding: 0;
			}
			
			body {
				margin: 25px;
				padding: 50px;
				position:  absolute;
			}
			
			#container {
				position: absolute;
				border: solid 1px #FF0000;
			}
			
			 	#container h2 {
				position: absolute;
				border: solid 1px #0F0;
				left: 0px;
				top: 0px;
			}
		
		</style>
	</head>
	<body>
		<div id="container">
			<h1>ABCDE</h1>
			<h2>12345</h2>
		</div>
	</body>
</html>

其中，container元素为包含块

垂直居中的实例：
代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			
			#wrap {
				/*border: 1px solid #000;*/
				position: absolute;
				width: 100px;
				height: 100px;
				left: 50%;
				top: 50%;
			}
			
			#box {
				background-color: #000000;
				width: 100px;
				height: 100px;
				position: relative;
				top:-50%;
				left: -50%;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="box"></div>
		</div>
	</body>
</html>

绝对定位中的坐标值

absolute从定位元素外壁到包含块元素顶部内壁距离
relative从定位元素外壁到原始位置外壁的距离

定位层叠（z-index）

一般来说，定位元素的z-index会高于文档流
通过将z-index设定成负值可以使定位元素在文档流下方

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1, #box2, #box3 {
				width: 200px;
				height: 100px;
			}
			
			#box1 {
				background-color: red;
				left: 100px;
			}
			
			#box2 {
				position: absolute;
				background-color: blue;
				top: 25px;
				left: 50px;
				z-index: -1;
			}
			
			#box3 {
				position: absolute;
				background-color: green;
				top:50px;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="box1">Box1</div>
		<div id="box2">Box2</div>
		<div id="box3">Box3</div>
	</body>
</html>

嵌套层叠

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>嵌套层叠</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			
			#wrap,#header {
				position: relative;
			}
			
			#logo {
				display: block;
				position: absolute;
				left: 20px;
				top: 20px;
				z-index: 2;
			}
			
			#main {
				position: absolute;
				width: 100%;
				height: 400px;
				background-color: #6699FF;
				top: 40px;
				text-align: center;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="header">
				<img id="logo" src="../img/bohe-004.jpg"/>
			</div>
			<div id="main">Main</div>
		</div>
	</body>
</html>