CSS定位布局

1.背景：

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

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

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

3.定位布局分类

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

4.定位布局的语法

postion : 定位类型;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值；

5.定位布局的特殊情况（非默认情况）

• 默认情况
  • 固定定位（fixed）与绝对定位（absolute）都是相对于浏览器定位的，而相对定位（relative）是相对与自己的原始位置定位的
• 特殊情况
  • 当父元素设置了相对定位（relative）时，子元素设置绝对定位（absolute），这时子元素就会相对于父元素来定位，而不是相对浏览器来定位了
  • 当祖先元素被设置了相对定位（relative）时，子元素设置绝对定位（absolute），这时子元素就会相对于祖父元素来定位，而不是相对浏览器来定位了
  • 总结：只要是元素包含元素，里面元素被设置了绝对定位（absolute）时，它会往上去找相对的对象，如果包含它的所有元素都没有设置相对定位（relative），则它会以默认情况去定位，也就是相对于浏览器去定位

6.z-index属性

• 网页不是平面的，它具有三维结构，我们可以通过z-index来控制元素的堆叠顺序，也就是说我们可以通过z-index将一个元素放到另一个元素的上面或者下面
• 使用前提：z-index属性只有在定义了position（除static）后才会被激活
• 语法：z-index: 取值（可以是为负整数、0或者正整数）
• 视觉效果：如果值为正数，则离用户更近，为负数就更远
• 特殊情况：如果z-index的值相同，则遵循“后来者居上”原则叠加，就是说后面设置的z-index元素会叠加在前面设置的相同的z-index值得元素得上面