position定位

定位

position

• static 默认值，无定位
• absolute 绝对定位，脱离文档流（飘了），定位使用left/right/bottom/bottom，控制自己想去的位置
  • 给元素添加绝对定位之后，元素会飘起来，别人占据自己的位置
  • 第一种情况 在该元素设置绝对定位之后，它的父元素身上没有任何定位设置的时候，就参照浏览器的的第一屏做定位（未开启定位），使用relative最好，当然使用absolute更好。若是在父元素中开启定位，则是相对于父元素定位
  • 第二种情况 要围绕父元素做位置移动，就父元素添加定位（最好给相对定位）
  • 层级关系 z-index（可以取负值）
• relative 相对定位
  • 文档流 给元素添加position:relative相对定位后，不会脱离文档流，元素没有飘
  • 有参照物，相对自己原来的位置做移动
  • 层级关系 z-index
• fixed 固定定位 相对于浏览器整个窗口做固定定位
  • 给元素添加固定定位后，就飘了（脱离文档流）
  • 即使页面过大，出现滚动条，仍然相对于浏览器窗口做定位
  • 层级关系 z-index
• sticky 粘性定位 主要用来做吸顶效果
  • 没有飘，没有脱离文档流
  • 在页面没有滚动条的时候，只有left属性生效
  • 在页面有滚动条的情况下，left top bottom 方向是生效的，主要是top生效，吸顶效果
  • 层级关系 z-index

给绝对定位的父元素添加相对定位，父元素就是包含块