定位之——相对定位（relative）与绝对定位（absolute）

是啊柒呢

已于 2023-05-24 22:40:48 修改

阅读量3.6k

点赞数 6

文章标签： html 前端 css

于 2023-05-24 22:16:01 首次发布

本文链接：https://blog.csdn.net/m0_74114770/article/details/130855299

版权

文章介绍了CSS中position属性的用法，重点讨论了相对定位和绝对定位的概念和区别。相对定位是相对于元素自身位置移动，而不改变文档流；绝对定位则根据最近的定位祖先元素（或根元素）定位，脱离标准流。文章还展示了如何通过相对和绝对定位实现中国八卦图的布局，并提倡结合实践巩固这些知识。

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

一、相对定位与绝对定位你怎样看待的，什么是定位（position）？

对于相对定位与绝对定位这是很重要的知识点，前端学的怎样也是看你的定位学的怎样，他影响了你的整个页面的排版与布局，废话不多说让我们来看看相对定位和绝对定位吧。

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position: static|absolute|fixed|relative|sticky|initial|inherit;

二、相对定位（relative）

相对定位简而言之就是相对于元素本身的位置做出的变化，但他并不脱标（脱离标准流）。

这里得注意一下相对定位（relative）是相对于自己本身位置移动，原本空间依然是在的，参照物是自己。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绝对定位与相对定位</title>
	</head>
	<style>
	
		.box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			text-align: center;
			font-size: 20px;
			margin: auto;
			position: relative;
		}
		.relative_left {
			width: 100px;
			height: 100px;
			background-color: blue;
			text-align: center;
			font-size: 20px;
			margin: auto;
			position: relative;
			left: 500px;
		}
		.relative_right {
			width: 100px;
			height: 100px;
			background-color: skyblue;
			text-align: center;
			font-size: 20px;
			margin: auto;
			position: relative;
			right: 500px;
		}
	</style>
	<body>
		<div class="box1">
			以盒子1为基础参考位置移动
		</div>
		<div class="relative_left">
			相对定位1
		</div>
		<div class="relative_right">
			相对定位2
		</div>
	</body>
</html>

relative
生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

二、绝对定位（absolute）

绝对定位（absolute），它会根据父级元素进行定位，如果父级元素没有定位，那他会一直往上找，直到找根元素（html）来进行定位，并且使用绝对定位时它会脱标（脱离文档流或者说脱离标准流）

absolute 元素相对于它的第一个定位的（非静态）祖先元素进行定位。

例如当父级元素没有设置定位时根据根元素（html）来进行定位:

代码如下：

如果他们的父级元素盒子1设置了定位（relative）：

会根据盒子1的位置来进行移动

代码如下：

三、相对定位与绝对定位通常是配合一起使用的（子绝父相）

子绝父相：子元素是绝对定位，父元素是相对定位；当然也有绝对定位与固定定位相配合使用的，例如百度或者其他浏览器的搜索框，移动鼠标会发现搜索框固定在最上面不跟随页面一起滚动。当然定位有固定定位（fixed）和粘性定位（sticky）这里我就不多做解释了，这里主要讲相对与绝对定位。

四、动手实践一下中国“八卦图”（阴阳鱼图）的代码如何利用相对定位与绝对定位来实现的。

参考代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.bagua {
			width: 600px;
			height: 600px;
			border: 1px solid black;
			border-radius: 50%;
			position: relative;
			left: 50%;
			margin-top:100px;
			margin-left: -300px;
		}
		.bagua .black{
			width:50%;
			height:100%;
			background-color: black;
			border-radius: 999999px 0 0 999999px;
		}
		.bagua .white{
			width:50%;
			height:100%;
			background-color: white;
			border-radius: 0 999999px 999999px 0;
			position: absolute;
			top: 0;
			right: 0;
		}
		.bagua .xiaohei {
			width: 50%;
			height: 50%;
			background-color: black;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 25%;
		}
		.bagua .xiaoba {
			width: 50%;
			height: 50%;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			bottom: 0;
			right: 25%;
		}
		.bagua .litter-xiaohei {
			width: 15%;
			height: 15%;
			background-color: black;
			border-radius: 50%;
			position: absolute;
			bottom:20%;
			right: 45%;
		}
		.bagua .litter-white {
			width: 15%;
			height: 15%;
			background-color: white;
			border-radius: 50%;
			position: absolute;
			top:20%;
			left: 45%;
		}
		.bagua {
			animation: hell;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}
		@keyframes hell{
			0% {
				transform:rotate(0deg);
			}
			100% {
			transform:rotate(360deg);
			}
		}
	</style>
	<body>
		<div class="bagua">
			<div class="black"></div>
			<div class="white">	</div>
			<div class="xiaohei"></div>
			<div class="xiaoba"></div>
			<div class="litter-xiaohei"></div>
			<div class="litter-white"></div>
		</div>
		
	</body>
</html>