相对定位(relative)和绝对定位(absolute)详细图解

最新推荐文章于 2023-05-24 22:16:01 发布

开航母的贝塔丶

最新推荐文章于 2023-05-24 22:16:01 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_44501354/article/details/105186223

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

设置好position后使用top、left、right设置偏移量即可(设置后这些才会生效)
相对定位(relative)
- 相对其正常位置做调整，但是其原本的位置在修改后还是存在的，即仍然占据空间;
- 常用作绝对定位的容器
绝对定位(absolute)
- 相对于最近的已定位父元素做调整，若没有，则相对于整个<html>做调整,它的定位和文档流无关，位置不占据空间，可能会和其他位置的元素重叠（这种情况可使用z-index调整显示优先级）
- 可利用相对定位的父容器进行调整
调整前后对比图

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>position定位</title>
	</head>
	<style>
		/* 相对定位:相对其正常位置做调整，但是其原本的位置在修改后还是存在的，即仍然占位; */
		#rela{
			position: relative;
			height: 80px;
			background: burlywood;
			text-align: center;
			line-height: 80px;
			font-size: 30px;
			width: 50%;
			top: 800px;
			left: 25%;
		}
		
		/* 绝对定位:
			   相对于最近的已定位父元素做调整，若没有，则相对于整个<html>做调整，
			   它的定位和文档流无关，位置不占据空间，可能会和其他位置的元素重叠
			*/
		#abso{
			position: absolute;
			height: 80px;
			background:yellowgreen;
			text-align: center;
			line-height: 80px;
			font-size: 30px;
			width: 50%;
			top: 20px; 
			z-index: 1;
		}
		#abso2{
			position: relative;
			height: 80px;
			background: palevioletred;
			text-align: center;
			line-height: 80px;
			font-size: 30px;
		}
		
		
		
		#rela2{
			position: relative;
			height: 240px;
			background: cadetblue;
			text-align: center;
			line-height: 80px;
			font-size: 30px;
		}
		#abso3{
			position: absolute;
			height: 80px;
			background: palevioletred;
			text-align: center;
			line-height: 80px;
			font-size: 30px;
			width: 50%;
			margin-left: 25%;
			top: 200px;
			left: 25%;
		}
		
		
	</style>
	<body>
		<div id="rela">
			相对定位div区域一
		</div>
		
		<div id="abso">
			绝对定位div区域一
		</div>
		<div id="abso2">
			绝对定位div区域二
		</div>
		<br /><br /><br /><br />
		<div id="rela2">
			相对定位div区域二
			<div id="abso3">绝对定位div区域三</div>
		</div>
		
	</body>
</html>

开航母的贝塔丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
相对定位(relative)和绝对定位(absolute)详细图解

设置好position后使用top、left、right设置偏移量即可(设置后这些才会生效) 相对定位(relative) 相对其正常位置做调整，但是其原本的位置在修改后还是存在的，即仍然占据空间; 常用作绝对定位的容器绝对定位(absolute) 相对于最近的已定位父元素做调整，若没有，则相对于整个<html>做调整,它的定位和文档流无关，...
复制链接

扫一扫