一. position 定位三要素
1、参考位置
a. 相对定位position:relative:位置根据本身正常位置做调整;top/bottom/left/right指的是位置偏离原位置上下左右多少距离
b. 绝对定位position:absolute:根据父元素的位置昨调整,要想让元素的绝对定位设置成功,那么必须让该元素的父元素的position设置为relative或者absolute,top/bottom/left/right指的是位置偏离父元素上下左右边框多少距离
c. 固定定位position:fixed:根据浏览器的位置做调整,top/bottom/left/right指的是位置偏离浏览器窗口边框上下左右多少距离
2、水平方向位置
3、垂直方向位置
二. position用法总结
position值 | 参考位置 | 水平方向位置确定 | 垂直方向位置确定 | 对后面元素位置影响 | 注意 |
relative (相对定位) | 该元素本身原来的位置 | left/right:偏离原位置向右/左多少距离; | top/bottom:偏离原位置向下/上多少距离; | 无影响 |
|
absolute (绝对定位) | 该元素的父元素位置 | left/right:距离该元素的父元素左/右边框多少距离 | top/bottom:距离该元素的父元素上/下边距多少距离 | 该元素脱离文档流,后面元素可占据该元素的本来位置 | 该父元素的定位不能为默认值static |
fixed (固定定位) | 浏览器窗口 | left/right:偏离浏览器窗口向右/左多少距离; | top/bottom:距离浏览器上/下边距多少距离 | 该元素脱离文档流,后面元素可占据该元素的本来位置 |
|