定位的分类，相对定位和绝对定位的总结

定位

不定位

• position：static;

相对定位

• position:relative;

• 激活属性

  • top

  • bottom

  • left

  • right

  • 位移参考于原本的位置

  • 特性

  • 不会脱离文档流

  • 对元素本身没有影响

  • 如果同时设置了 top 和 bottom

  • top会生效

  • left 和right left生效

绝对定位

• position：absolute;

• 激活属性

  • top

  • bottom

  • left

  • right

  • z-index

  • 控制层次

  • 注意：

  • 可以设置负数

  • 一旦设置了负数，这个内容就无法被点击了

• 特性

  • 提升层级一级

  • 脱离文档流

  • 使不支持宽高的元素重新支持宽高

  • 如果没有设置宽度，由绝对定位元素的内容去撑开宽度

• 绝对定位位移参考于，离他最近的设置了定位的父级