相对定位和绝对定位

1、相对定位和绝对定位

position:absolute; 绝对定位，绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块body。绝对定位和文档流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的顺序。

子绝父相特点：①子级绝对定位，不会占有位置，可以放到父级盒子的任何一个地方，不会影响其他盒子；②父级盒子需要加定位限制子盒子在父级盒子内显示；③父级盒子布局时，需要占有位置，因此父级只能是相对定位。

绝对定位特点：①若没有父级元素或父级元素没有定位，则以浏览器为准定位；②如果父级元素有定位，则以最近一级的有定位父级元素未参考点位置；③绝对定位不占有原先位置。

position:relative;相对定位，相对定位是相对于元素在文档中的初始位置，注意在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间

position:fixed固定定位：相对于浏览器窗口定位，不会随浏览器窗口的滚动条滚动而变化，除非在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档滚动影响。

定位模式	是否脱标	移动位置	是否常用
static静态定位	否	不能使用边tuo
absolute绝对定位	是（不占有位置）	相对于已定位的祖先元素（position）	常用
relative相对定位	否（占有位置）	相对于自身初始位置	常用
fixed固定定位	是（不占有位置）	浏览器可视区	常用
sticky粘性定位	否（占有位置）	浏览器可视区	当前阶段少

z-index：

使用定位的元素会提升一个层级。如果多个元素同时开启了定位，层级都一样的情况下，如果发生重叠，后面的元素会覆盖住前面的元素。要想调整，可以修改元素的z-index值。没有开启定位的元素不能修改z-index！！

不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染。即使子元素的z-index大于其他子元素，但只要低z-index的子元素的父元素z-index大，就会覆盖其他子元素。

在默认情况下，元素使用了非static的position属性后，就会有一个隐晦的层级，居于普通元素之上，无需额外设置z-index属性值。