定位

position

​ 定位是一种更高级的布局手段

​ 通过定位可以可以将元素摆放到页面的任意位置

position:static;	/*默认值，元素是静止的没有开启定位*/
position:relative;	/*开启元素的相对定位*/
position:absolute;	/*开启元素的绝对定位*/
position:fixed;		/*开启元素的固定定位*/
position:static;	/*开启元素的粘滞定位*/ 

相对定位

当position属性值为relative时则开启了元素的相对定位

position:relative;
left:100px;
top:-100px;

1. 元素开启相对定位以后，如果不设置偏移元素不会发生任何的变化
2. 相对定位是参照与元素在文档流中的位置进行定位
3. 相对定位会提升元素的层级
4. 相对定位不会使元素脱离文档流
5. 相对定位不会改变元素的性质（块还是块，行内还是行内）

• 偏移量（offset）：通过偏移量设置元素的位置
  • right/left
    • 定位元素和定位位置的左/右侧距离
    • 通常情况下我们只会使用其中之一
    • left/right越大元素越向右/左移动
  • top/bottom
    • 定位元素和定位位置上/下边的距离
    • 通常情况下我们只会使用其中之一
    • top/bottom越大元素越向下/上移动

绝对定位

当position属性值为absolute时则开启了元素的相对定位

position:absolute;
left:100px;
top:200px;

1. 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2. 开启绝对定位后，元素定位会从文档流中脱离
3. 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4. 绝对定位会使元素提升一个层级
5. 绝对定位元素时先对于其包含快进行定位的

• 包含块 （containing blok）

  • 绝对定位的包含块

    • 离它最近的开启了定位的祖先元素（非pasition:static;）
    • 若所有的祖先元素都没有开启定位则根元素就是它的包含块

  • <html>(根元素、初始包含块)

固定定位

当position属性值为fixed时则开启了元素的相对定位

position:fixed;
left:100px;
top:200px;

1. 也是一种绝对定位，大部分特点与绝对定位一样
2. 不同点：
   • 固定定位永远参考浏览器的视口进行定位
   • 不会随网页的滚动条的滚动条滚动而滚动

粘滞定位

当position属性值为sticky时则开启了元素的相对定位

position:sticky;
top:10px;//滚动后固定在距离top10px的位置

IE不行

1. 和相对定位基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定

绝对元素的定位

水平布局

left+marrgin-left+border-left+padding-left+width+padding-right+border-right+marrgin-right+right=包含块内容区的宽度

当我们开启了绝对定位后:

• 水平方向的布局等式就需要添加left和right两个值
  • 此时规则和之前一样只是多添加了两个值
  • 当发生过度约束：
    • 如果九个值中没有auto则自动调整right值以使等式满足
    • 如果有auto，则自动调整auto的值以使等式满足
  • 可以设置auto的值
    • margin、width、left、right
  • 因为left和right的默认值使auto，则当等式不满足切为默认值时，会自动调整这两个值
• auto优先级：偏移量>宽高>外边距

垂直方向上布局的等式也必须满足

top+margin-top+boder-top+padding-top+height+padding-bottom+boder-bottom+margin-bottom+bottom=包含块的高度

.box{
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}/*在包含块中垂直、水平居中*/

元素的层级（z-index）

对于开启了定位元素，可以通过z-index属性来指定元素的层级

​ z-index需要一个整体作为参数，值越大越苏的层级越高，越优先显示

• 如果元素层级一样，则优先显示（结构上HTML）靠下的元素
• 祖先的元素层级再高也不会盖住后代元素