position设置块级元素相对于其父块的位置和相对于它自身应该在的位置
1.绝对定位(absolute)
特点:
a 若没有父元素,参照物为整个文档
b 默认情况下参照物为已经做定位的父元素
c 添加绝对定位的元素,会脱离整个布局流,破坏布局空间
2.相对定位(relative相当于灵魂出窍的场面)
a 参照物为自身的默认位置
b 占据空间
c 不会破坏布局流
3.固定定位(fixed)
a 参照物为浏览器窗口
4.粘性定位(sticky 存在兼容问题)
特点:
是relative 和fixed的结合
当页面没有触发滚动条的时候,执行的效果是position:relative,反之执行的是position:fixed
应用是:页面吸顶
让一个元素在浏览器窗口左右上下居中的方式:
方法一:
position:fixed
left:50%;
top:50%;
margin-left: -盒子宽度的一半
margin-top:-盒子高度的一半
方法二:
position:fixed;
left:0;
right:0
top:0
bottom:0
margin:auto