绝对定位和相对定位

黄晶谛

于 2021-05-12 23:42:52 发布

阅读量142

点赞数

分类专栏： # HTML&CSS

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/116724347

版权

HTML&CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
		}

		.father {
			position: absolute;  /* 绝对定位，不占位置 */
			background-color: red;

		}

		.son {
			background-color: pink;
			width: 220px;
		}
	</style>
</head>
<body>
	<div class="father"></div>
	<div class="son"></div>
</body>
</html>

二、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 300px;
			height: 300px;
			/* border: 1px solid red; */
			/* background-color: red; */
		}

		.top {
			background-color: red;
			position: relative; /* 相对定位： 1、占用原来的位置； 2、以原位置的左上角为基准点进行偏移。 */
			left: 150px;
			top: 150px;
		}

		.bottom {
			background-color: purple;
		}

	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>

三、固定定位

固定定位，以浏览器为基准

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.father {
			width: 500px;
			height: 500px;
			background-color: purple;

		}

		.son {
			width: 200px;
			height: 200px;
			background-color: pink;
			position: fixed; /* 固定定位，以浏览器为基准 */
			margin-top: 100px;
			margin-left: 100px;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
	<p>123</p>
</body>
</html>

四、定位的相对性

4.1 当父元素有定位时，子元素以最邻近的有定位的父元素左上角为基准

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.grandfather {
			width: 800px;
			height: 800px;
			background-color: blue;
			/* position: absolute; */
		}

		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			margin: 100px;
			position: absolute;
		}

		.son {
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			left: 50px;
			top: 50px; /* 当父元素有定位时，以最近的且有定位的父元素的左上角为基准 */
		}

	</style>	
</head>
<body>
	<div class="grandfather">
		<div class="father">
			<div class="son"></div>
		</div>
	</div>
</body>
</html>

4.2 当父元素没有定位时，子元素以当前屏幕或浏览器的左上角为基准

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father {
			width: 200px;
			height: 200px;
			background-color: pink;
		}

		.son {
			width: 100px;
			height: 100px;
			background-color: purple;
			position: absolute;
			left: 500px;
			top: 500px; /* 当父元素没有定位时，以当前浏览器屏幕为基准对齐 */
		}
		
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

4.3 定位的盒子垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: pink;

			/**
			* 此时水平居中对齐
			*/
			position: absolute; /* 利用绝对定位 */
			left: 50%; /* 向右偏移父容器的宽度的一半距离 */
			margin-left: -100px; /* 再向左偏移盒子宽度的一半 */
			/**
			* 设置垂直居中对齐
			*/
			top: 50%;
			margin-top: -100px;

		}
	</style>	
</head>
<body>
	<div></div>
</body>
</html>

黄晶谛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
绝对定位和相对定位

一、绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 200px; height: 200px; } .father { position: absolute; /* 绝对定位，不
复制链接

扫一扫