相对定位:
- position:relative
不脱离文档流
,不会高度塌陷- 相对于自身定位
绝对定位:
- position:absolute
- 脱离文档流,可以自绝父相完成布局,如居中
- 离最近的有定位的祖先元素定位,否则会相对于根元素定位,所以,
要在父级设置相对定位
固定定位:
- positon:fixed
- 脱离文档流,相对于浏览器可视窗口定位,用于
广告,点击到顶部
等
粘滞定位:
- position:sticky
- 不考虑兼容性是很好用个定位,如
设置某个盒子top:0,则滑动到顶部,就固定
了
z-index:
- 定位元素的层级问题,即谁在最上方,模态框常用z-index:9999等
一个靠定位完成的布局:
- 后面的图片是一直滚动的,但是设置了定位就不会影响别的页面,
减少重绘回流(动画常用)
思考?默认值是static,粘滞定位兼容性不好