Author:天添豆浆
计算机科学与技术专业,迷摇滚的理科男
新手村码农,第七篇博客,感觉CSS中position的概念略模糊,梳理一下
position概述
Position,这个属性定义建立元素布局所用的定位机制。——搜狗百科
tips:下面z-index、top、right、bottom、left、clip都要配合position才能使用
背景
html中的任何元素在浏览器显示时都会遵循默认的文档流进行摆放,文档流即从左往右(行内元素),从上往下(块元素);但是在css中可以通过定位的方式将元素脱离正常的文档流,css中定位主要包含以下属性:
position:设置定位方式
- relative: 相对定位(不会导致元素脱离文档流)
- absolute: 绝对定位(元素会脱离正常的文档流)
- fiexd: 固定定位(脱离正常文档流)
- static(默认值)
- z-index:层叠顺序(必须配合绝对定位一起使用,数值越大越置顶)
- left:元素与父容器左边的距离
- right:元素与父容器右边的距离
- top:元素与父容器上边的距离
- bottom:元素与父容器下边的距离
看看CSS参考手册中的文档 :
示例:
- relative,相对的,不会导致元素脱离文档流:
- absolute,绝对的,元素对象会脱离文档流:
脱离文档流,就是独立出来,不会影响其他的元素