一、定位的属性值
1、position:fixed
固定定位。顾名思义,元素设置了固定定位之后,位置不会发生改变。即相对于视窗定位,不论浏览器怎么拖拉,该元素的位置不会发生改变
1.1、fixed定位对元素的影响
元素被设置fixed定位之后会完全脱离文档流,不占用HTML的空间。如果是行级元素,设置成fixed定位之后具有块级元素的特性,即可以设置宽高,也可以支持CSS样式;如果是块级元素的话,则该元素会失去对其父级的宽度的继承。这里要注意的是,如果元素设置fixed定位之后,位置必须有初始化,否则我们的可视范围将看不到该元素,并且元素一旦设置了fixed定位之后,在设置float时。将不会生效。
2、position:relative
相对定位。即相对于元素自身定位,若给元素设置top与left时,该元素的移动参照物将以自己的当前位置为起点上下左右移动。
2.1、relative定位对元素的影响
元素设置成relative之后,将不会脱离文档流,即它当前的位置不会被其他元素所占用。当元素设置成relative时,不会改变行块元素的默认表现形式。一般元素设置成relative之后不会对其自身产生影响,所以一般相对定位是结合绝对定位设置,作为绝对定位的参照点
3、position:absolute
绝对定位。如果此时元素的父级没有设置定位元素,则该元素相对于浏览器进行定位,如果元素的父级设置成定位元素,则该元素的参照点为其父级。即以其父级为原点上下左右移动。
3.1、absolute定位对元素的影响
元素一旦设置决定定位之后将会完全脱离文档流,不会占用任何位置。如果是行级元素,设置成fixed定位之后具有块级元素的特性,即可以设置宽高,也可以支持CSS样式;如果是块级元素的话,则该元素会失去对其父级的宽度的继承。
4、position:static
默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)