第七章 定位

position:static | relative | absolute | fixed;
         静态      相对        绝对        固定

7.1 相对定位 relative

特征：

• 与标准文档流下的盒子没有任何区别

• 留“坑”，会影响页面布局

作用：做“子绝父相”布局方案的参考

参考点：以原来的盒子为参考点

7.2 绝对定位 absolute

• 参考点

  • 如果单独设置一个盒子为绝对定位

以top描述，它的参考点是以body的（0，0）为参考点
以bottom描述，它的参考点是以浏览器的左下角为参考点

• 子绝父相

以最近的父辈元素的左上角为参考点进行定位

• 特征

1.脱标
2.压盖
3.子绝父相

 

7.3 固定定位 fixed

1.脱标
2.固定不变
3.提高层级

参考点：
    以浏览器的左上角为参考点

7.4 z-index

• 只适用与定位的元素改变层级，z-index:auto; auto自动

z-index只应用在定位的元素，默认z-index:auto;
z-index取值为整数，数值越大，它的层级越高
如果元素设置了定位，没有设置z-index，那么谁的样式写在最后面的，表示谁的层级越高。(与标签的结构有关系)
从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。