position：absolute绝对定位的使用

position定位的使用

相对定位（relative）：相对于块级元素（或行内块）自身位置进行定位；
绝对定位（absolute）：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；

绝对定位的偏移量的top/bottom,left/right是相对于已设置relative的祖先元素

1.有定义偏移量的值（top/bottom,left/right）

是相对父元素的相对于父级元素的占位区定位（包含padding区域）

2.没有定义偏移量的值（top/bottom,left/right）

是相对于父级定位元素的content（内容区，不包括padding的定位） - 简称：无依赖定位

这里的‘无依赖定位’的关键字是出于看张鑫旭的《css世界》，是本很不错的书籍，介绍了很多的css的相关属性与使用，详细的阐述了属性的使用，值得反复阅读；（张鑫旭的个人博客：https://www.zhangxinxu.com/wordpress/）

特征：脱离文档流，并流向在后面的区域，并且不占据文档的内容区域

<style>
 .father {
     width: 2rem;
     height: 2rem;
     background: url(../images/02.jpg);
     background-size: contain;
 }
 .shape {
     position: absolute; // 直接使用，无设置位置偏移量的设置
     width: .5rem;
     height: .5rem;
     background: url(../images/top.png);
     background-size: contain;
 }
 .shapeBottom {
     margin-top: -.5rem;
 }
</style>
<h3>无依赖定位</h3>
<div class="father">
    <div class="shape"></div>
</div>
<div class="shape shapeBottom"></div>

效果如下图所示:

<style>
 .list {
     display: flex;
     justify-content: space-around;
     line-height: .5rem;
     background: #ccc;
 }
 .icon__hot {
     position: absolute;
     width: .2rem;
     height: .2rem;
     background: url(../images/hot.png);
     background-size: contain;
     margin: 0 0 0 -.05rem;
 }
</style>
<diV class="list">
<div>首页</div>
 <div>普通导航</div>
   <div>VR导航<i class="icon__hot"></i></div>
   <div>全景模式</div>
</diV>

效果如下图所示：

好处：无需给父元素添加position：relative（这个属性的设置还有关系到提升层级的这一层面：z-index），也无需要添加top/bottom，left/right进行位置的控制，并且兼容性很好！节省了很多不必要的代码处理！