CSS中五种定位及元素的层级

一、定位(position)：

定位是一种更加高级的布局手段,通过定位我们可以将一个元素摆放到页面的任意位置
使用position属性来设置定位
可选值：
static:默认值 元素是静止的 没有开启定位
relative:开启元素的相对定位

相对定位的特点：
1.元素开启相对定位以后 如果不设置偏移量(offset) 元素不会发生任何变化
通过偏移量设置元素的位置:
top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下边的距离
left:定位元素和定位位置左边的距离
right:定位元素和定位位置右边的距离
2.相对定位是参照与元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质 块还是块 行内还是行内

absolute:开启元素的绝对定位

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