CSS定位的理解

定位的理解

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

使用postion属性来设置定位(特点不影响其他元素)

可选值：

• static 默认值，元素是精致的没有开启定位
• relative 开启相对定位
• absolute 开启元素的绝对定位
• fixed 开启元素的固定定位
• sticky 开启元素的粘滞定位

相对定位特点（参照物就是原本的位置）：relative

• 设置相对定位之后如果不设置偏移量不会发生任何变化（偏移量有 top ,right,left,bottom）
• 相对定位会提升元素的层级
• 不会使元素脱离文档流
• 不改变元素的性质

绝对定位 特点:absolute

• 开启绝对定位不设置偏移量元素位置不变
• 会从文档流中脱离
• 绝对定位改变元素性质（行内变成块，块的宽高被内容撑开）
• 提升一个层级
• 相对于其包含块进行定位的（ 包含块就是离当前元素最近的祖先元素
  ）
• • 绝对定位的包含块就是离他最近的开启定位的祖先元素
  • 如果所有的祖先元素都没有开启定位就看根元素

固定定位 ：fixed

固定定位也是一种绝对定位，所以大部分特点都绝对定位一样

唯一不同的是固定定位永远参照浏览器的视口进行定位

固定定位不会根据滚动条滚动来滚动

粘滞定位 :sticky(IE浏览器不兼容)

粘滞定位和相对定位的特点相对一致

但是当到达某个位置的时候就不动了（想对于body）

元素的层级

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

z-index需要一个证书作为参数，值越大元素的层级越高，元素层级越高越优先显示

如果元素层级一样，则优先显示向下的

使用定位达成水平居中
postion:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
垂直居中同理
postion:absolute;
top:0;
bottom:0;
margin-top:auto;
margin-bottom:auto;