一、相对定位与绝对定位你怎样看待的，什么是定位（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>
二、绝对定位（absolute）
绝对定位（absolute），它会根据父级元素进行定位，如果父级元素没有定位，那他会一直往上找，直到找根元素（html）来进行定位，并且使用绝对定位时它会脱标（脱离文档流或者说脱离标准流）
例如当父级元素没有设置定位时根据根元素（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>
