CSS中五种定位及元素的层级
⼀、定位(position)：
定位是⼀种更加⾼级的布局⼿段，通过定位我们可以将⼀个元素摆放到页⾯的任意位置
使⽤position属性来设置定位
可选值：
static：默认值 元素是静⽌的 没有开启定位
relative：开启元素的相对定位
相对定位的特点：
1.元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发⽣任何变化
通过偏移量设置元素的位置:
top：定位元素和定位位置上边的距离
bottom：定位元素和定位位置下边的距离
left：定位元素和定位位置左边的距离
right：定位元素和定位位置右边的距离
2.相对定位是参照与元素在⽂档流中的位置进⾏定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离⽂档流
5.相对定位不会改变元素的性质 块还是块 ⾏内还是⾏内
absolute：开启元素的绝对定位
绝对定位特点:css固定定位
1.开启绝对定位后 如果不设置偏移量 元素位置不会发⽣变化
2.开启绝对定位后 元素会从⽂档流中脱离
3.绝对定位会改变元素的性质，⾏内变成块，块的宽⾼被内容撑开
4.绝对定位会使元素提升层级
5.绝对定位是相对于其包含块进⾏定位的
包含块(containing block):
正常情况下包含块就是离当前元素最近的祖先块元素
绝对定位的包含块： 离它最近的开启定位的祖先元素
如果所有的祖先元素都没有开启定位
则相对于根元素进⾏定位
html(根元素，初始包含块)
fixed：开启元素的固定定位
固定定位也是⼀种绝对定位 所以固定定位的⼤部分特点和绝对定位⼀样
唯⼀不同的是 固定定位永远参照于浏览器的视⼝(浏览器可视窗⼝)进⾏定位
固定定位的元素不会随滚动条滚动上去 ⽽是跟随可视窗⼝的移动⽽移动
sticky：开启元素的粘滞定位
粘滞定位的特点和相对定位基本⼀样
粘滞定位可以在元素到达某个位置时固定
⼆、绝对定位的元素布局
开启定位后的等式：
left+margin-left+border-left+padding-left+width+padding-left+width+padding-right+margin-right+right=包含块内容区的宽度
当开启绝对定位后：
⽔平⽅向的布局等式就要添加left和right两个值
此时规则和之前⼀样只是多添加了两个值
当发⽣过渡约束时：
如果九个值中没有auto 则⾃动调整right值 以使等式满⾜
如果有auto则⾃动调整auto的值以使等式满⾜
可以设置auto的值：margin width left right
left和right的值默认是auto 则等式不满⾜时，会⾃动调整这两个值
垂直⽅向布局的等式也必须要满⾜：
top+margin-top+margin-bottom+padding—top/bottom+border-top/bottom+height+bottom=包含块的⾼度以下设置可以让元素⽔平垂直都居中:
left: 0;
right: 0;
top: 0;
bottom: 0;
三、元素的层级
对于开启定位的元素，可以通过z-index属性来指定元素的层级
z-index需要⼀个整数作为参数，值越⼤的元素的层级越⾼
元素层级越⾼的越优先显⽰
如果元素层级⼀样 则优先显⽰靠下的
祖先元素层级再⾼，不会盖住后代元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。