css 的position定位 个人小结:
fixed:固定元素位置,脱离正常文档流,不论页面中元素如何变化,当前fixed元素始终固定位置,一般用于一些顶部菜单,搜素,
回到顶部,快速回复 等 一些需要始终出现在用户视线内,需要跟随页面滚动,固定在方便点击的位置上的元素。
absolute:让当前元素脱离正常的文档流,对当前元素的位置改变(left,top,right,bottom)不会影响邻近的元素,如果使用
margin,padding属性也不会影响临近的元素(除非邻近的元素也是绝对定位)
在对某元素使用了absolute属性定位后,该元素后面的(在没设置absolute之前因此元素占位置被挤到后面的元素)会因
该元素脱离了文档流空出一块位置而去填补空缺(视觉效果为与该absolute定位的元素重叠,在没设置z-index 属性情况下后加载的
元素视觉上将会覆盖先加载的元素)
举个栗子:
有如下几个块元素div
在把box2设置为absolute后,红色的位置便被绿色占领,而因为绿色后加载,则红色被覆盖(若要红色出现在上方,可以设置z-inde为>0的值)
当有如下布局
当对元素box3使用absolute 后因为没有给box3定义top ,和left 属性 ,后面也没有模块对其进行覆盖,所以只是脱离文档流 ,
视觉效果上的位置没有改变。
当给box3设置top:0;的时候,则会相当于父级元素box1进行定位(因为box1设置过posit,若父级元素未设置,
则寻找父级元素的父级元素,若都没有,则相对浏览器)
relative:当前元素保持在正常的文档流中,对当前元素的位置改变(left,top,right,bottom)不会影响邻近元素,但是如果使用
margin,padding属性值进行留白,则附近元素会受到位置影响而产生变化