position
属性规定元素的定位类型。
position 有四个属性值:static(默认值)、relative(相对定位)、absolute和fixed(统称为绝对定位)。
static
,没有定位,元素出现在正常的流中(忽略 top、bottom、left、right 或者是 z-index 声明)。relative
,生成相对定位的元素,相对于原来位置移动,元素设置属性之后会出在文档流中不影响其他元素的布局。absolute
,生成绝对定位的元素,相对于static 定位以外的第一个父元素进行定位,元素会脱离文档流,如果设置偏移量会影响其他元素的位置定位。fixed
,生成绝对定位的元素,相对于浏览器窗口进行定位。
下面的同一段代码,这是position的属性值的不同,那么相对应的浏览器的显示结果也是不一样的。
当position属性值为absolute和fixed时:
当position属性值为relative时:
当position属性值为默认值static时:
基本上用的比较多的就是 relative 和 absolute 这两个属性,前者定位是相对自身位置定位,后者是相对于离元素最近的设置了绝对或相对定位的父元素决定的,如果没有父元素设置绝对或相对定位,那么元素相对于根元素也就是html元素定位。