【CSS】定位 ⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 )

韩曙亮

发布于 2023-04-16 14:27:25

1.2K0

发布于 2023-04-16 14:27:25

文章被收录于专栏：韩曙亮的移动开发专栏

一、需求分析及核心开发要点

要实现如下功能 , 下图粉色部分是整体父容器 , 紫色元素是中心的核心位置 , 蓝色是左上角的浮标 , 红色是右下角的浮标 ;

首先分析父容器元素 ;

由于子元素需要使用绝对定位 , 此处的父容器必须设置相对定位 ;

上图中 , 父容器存在 1 像素的边框 , 父容器中设置一个内边距 ;

设置子元素浮动后 , 浮动的元素可以覆盖到内边距范围 ;

		/* 最外层 父容器盒子 */
		.box {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: relative;

			/* 内容尺寸 通过测量图片获得 */
			width: 300px;
			height: 200px;

			/* 边框 1 像素实线 */
			border: 1px solid #ccc;
			/* 上下设置 100 像素外边距 水平居中 */
			margin: 100px auto;
			/* 子元素与 */
			padding: 10px;

			background-color: pink;
		}

中心元素只需要设置宽高 , 其大小与父容器的尺寸大小一致即可 ;

这是一个标准流元素 , 在父容器中正常显示 ;

		/* 标准流元素 */
		.center {
			width: 300px;
			height: 200px;

			background-color: purple;
		}

左上角的子容器 , 需要覆盖内边距范围 ,

此处不能使用浮动 , 浮动可以在标准流上方浮动显示 , 但是不能覆盖到内边距范围 ;

也不能使用相对定位 , 相对定位会保留元素原始位置 , 其它标准流元素无法使用该位置 ;

因此此处只能使用绝对定位 , 在设置了相对定位的父元素容器中 , 可以使用绝对定位在父容器的任意位置显示任何元素 ;

		/* 绝对定位元素 - 左上角 */
		.top {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: absolute;
			/* 该盒子在父容器左上角 */
			/* 上边偏移 0 紧贴顶部 */
			top: 0;
			/* 左边偏移 0 紧贴左侧 */
			left: 0;

			/* 内容尺寸 */
			width: 80px;
			height: 80px;

			background-color: blue;
		}

同理 , 右下角的子元素也是这样设置的 ;

		/* 绝对定位元素 - 右下角 */
		.bottom {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: absolute;
			/* 该盒子在父容器右下角 */
			/* 下边偏移 0 紧贴底部 */
			bottom: 0;
			/* 右边偏移 0 紧贴右侧 */
			right: 0;

			/* 内容尺寸 */
			width: 80px;
			height: 80px;

			background-color: red;
		}

二、完整代码示例

完整代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位示例</title>
	<style>
		/* 最外层 父容器盒子 */
		.box {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: relative;

			/* 内容尺寸 通过测量图片获得 */
			width: 300px;
			height: 200px;

			/* 边框 1 像素实线 */
			border: 1px solid #ccc;
			/* 上下设置 100 像素外边距 水平居中 */
			margin: 100px auto;
			/* 子元素与 */
			padding: 10px;

			background-color: pink;
		}

		/* 标准流元素 */
		.center {
			width: 300px;
			height: 200px;

			background-color: purple;
		}

		/* 绝对定位元素 - 左上角 */
		.top {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: absolute;
			/* 该盒子在父容器左上角 */
			/* 上边偏移 0 紧贴顶部 */
			top: 0;
			/* 左边偏移 0 紧贴左侧 */
			left: 0;

			/* 内容尺寸 */
			width: 80px;
			height: 80px;

			background-color: blue;
		}

		/* 绝对定位元素 - 右下角 */
		.bottom {
			/* 子元素设置绝对定位 父元素需要设置相对定位 */
			position: absolute;
			/* 该盒子在父容器右下角 */
			/* 下边偏移 0 紧贴底部 */
			bottom: 0;
			/* 右边偏移 0 紧贴右侧 */
			right: 0;

			/* 内容尺寸 */
			width: 80px;
			height: 80px;

			background-color: red;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="top"></div>
		<div class="center"></div>
		<div class="bottom"></div>
	</div>
</body>
</html>

展示效果 :