CSS定位布局

1.背景：

• 浮动布局比较灵活，但是不容易控制，所以出现了定位布局，使得用户精准定位页面中的任意元素成为可能

2.与浮动一起使用才能事半功倍

• 定位布局相对死板，所以要注意和灵活的浮动布局一起搭配使用，也就是说碰到position就要想下，是否搭配浮动会更好，碰到float就要想下，是否搭配position会更好

3.定位布局分类

• 固定定位(fixed)
  • 顾名思义就是固定元素在指定位置，不会随着滚动条的拖动而改变位置
  • 相对的对象：浏览器
  • 用途：网页布局中，经常会搭配JS（也可以搭配“锚点连接”）来实现“回到顶部”效果
  • 是否是脱离文档流：是
  • 是否会将行内元素转为行内块元素：是
• 相对定位(relative)
  • 顾名思义就是该元素位置相对于原始位置的定位
  • 相对的对象（默认情况下）：自身本该存在的原始位置
  • 用途：实现子元素相对父元素的定位
  • 是否是脱离文档流：否
  • 是否会将行内元素转为行内块元素：否
• 绝对定位(absolute)
  • 顾名思义就是该元素可以绝对性的定义到任何位置
  • 相对的对象（默认情况下）：浏览器
  • 用途：使用最为广泛
  • 是否是脱离文档流：是
  • 是否会将行内元素转为行内块元素：是
• 静态定位(static)（了解下就行）
  • 静态定位就是默认