relative
我们首先看看relative的几个作用:
- 限制absolute的定位。
- 如果子级是定位元素，若想父级的overflow起作用，需要在父级加relative，否则overflow不生效
- 自身定位与无侵入，margin-top如果往上-50px，那么后面的元素也要往上，布局会变化，如果是relative，那么位置会被占住，后面的元素不会往上过去。可以用在一些微调上面。
.flex {
display: flex;
width: 80%;
margin: 0 auto;
}
.line {
flex: 1;
position: relative;
top: -10px;
border-bottom: 1px solid #000;
}
- relative的top，bottom，left，right是斗争，如果top bottom都存在, 那么top起作用，absolute的top，bottom，left,，right是拉伸。
- 提高层叠上下文，定位元素的层级要高于浮动及普通元素，如果被遮盖了，可以加上relative。
absolute
无依赖定位
具体表现是不用top， left来定位，通过margin来显示微调。好处是当布局有调整的时候会自适应，但是top等定位已经把位置定死了，不能自适应。
原理是absolute的跟随性，就是原来在什么地方，absolute后仍然在什么地方。所以就能实现无依赖的定位效果。
设置绝对定位后，元素脱离文档流，后面的元素会补进来， 也就是后面的元素往前提。
例如：小icon和文本，把icon设置为绝对定位，通过margin进行微调，而不是通过left top进行调整。
总结：定位使用left top需要依赖父级设置relative，无依赖定位利用自身的跟随性，可以利用margin进行调整。
居中效果
top left和height width同时存在，以height width为主，如果加上margin: auto，可以实现一个居中的效果。
.box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 50%;
margin: auto;
}
导航中应用absoute
在做导航菜单的时候，子级的下拉菜单宽度需要根据子级的文字多少实现自适应，然而父级有relative，导致子级宽度自适应的话是不会超过父级的宽度。
那么，absolute元素如何超出其父级relative元素的宽度？
解决方法：父菜单不用relative，子菜单也不用left right而使用margin定位即可；
float与absolute脱离文档流的区别
使用float脱离文档流时，后面的盒子会无视这个元素，但后面盒子内的文本依然会为这个元素让出位置，环绕在周围。例如：
可以看到第二个div的背景和边框是占据了第一个DIV的空间的，但是第二个div的文本仍然为第一个DIV留出了位置。
对于使用absolute脱离文档流的元素，后面盒子与盒子内的文本都会无视它。可以看到，第二个div的文字亦被第一个div的文字给覆盖了
