css零碎知识：浅谈css position 属性

一.  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：距离浏览器上/下边距多少距离	该元素脱离文档流，后面元素可占据该元素的本来位置