定位(position):更加高级的布局手段,通过点位可以将元素翻到页面的任意位置
可先值:
static 默认值,元素是静止的没有开启定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘滞定位
相对定位:position:relative
特点:
-开启相对定位后,不设置偏移量,元素不会发生任何变化
-是参照元素在文档流中的位置来设置的
-相对定位会提升元素的层级
-相对定位不会脱离文档流,也不会改变元素的性质块还是块
偏移量(offset:top bottom left right):通过偏移量来设置元素的位置
绝对定位:position:absolute
特点:
-开启绝对定位后,不设置偏移量,元素位置不会发生任何变化
-开启绝对定位后,会脱离文档流
-绝对定位会改变元素的性质,行内变块,块的高宽为内容撑开
-会提升元素的层级
-绝对定位元素是相对其包含块进行的定位
包含块:
正常情况:包含块是当前元素最近的祖先块元素
绝对定位的包含块:离他最近的开启定位的祖先元素
固定定位:是一种特殊绝对定位,大部分特点与绝对定位相同,不同的是固定定位永远都是参照于浏览器的视口进行定位,不会随着网页滚动条滚动
相对定位水平垂直居中:
.box{
positon:absolute;
margin auto;
left:0;
top:0;
right:0;
bottom:;
}