position属性与float有一项相同的功能。那就是能使得元素脱离标准流。其参数有relative、static、absolute、fixed、center、page。今天学习了static、relative、fixed、absolute三个属性。
1,static是“静态”元素表现为标准流
2,relative是相对定位,定义该属性后可以再使用left、top、right、bottom来给元素定位。位置参数设定例子:left::100px; 意思为元素相对左边移动100px
3,absolute是绝对定位,使用此属性的元素会脱离标准流(尺寸多宽就是多宽,不独占一行),说明,绝对定位的定位域是浏览器窗口,什么意思呢?譬如说body的值大于默认值,则使用绝对定位时不会顾及到下拉区域。
4,fixed固定定位,固定定位同样可使元素脱离标准流,position:fixed;left:100px;top:100px; 此定位同样以浏览器窗口为标准。也就是说无论怎样拖动页面,都不会偏离用户看此元素的视线。定位范围以浏览器窗口为准。
5,inhert继承父元素的定位属性
说明:
1.若父子元素分别为fixed和absolute,子元素不受绝对定位元素影响,按照原有的定位属性显示。
2.继承只能继承父元素的定位方式,具体位置需要再自定义