甚么是CSS的position属性

CSS的position属性定义了元素在文档流中的位置，可让元素脱离文档流，从而实现更灵活的页面布局。CSS中的position属性有四个取值：static、relative、absolute和fixed。

1.static

设置元素为static时，元素的位置遵守文档流，即元素出现在HTML中的位置，不能通过top、bottom、left、right属性调剂位置，也没法通过z-index属性设置层叠顺序。

2.relative

相对定位通过top、bottom、left、right属性调剂元素位置。相对定位不会脱离文档流，元素原来所占的空间还在。另外，设置了相对定位的元素可以通过z-index属性设置其层叠顺序。

3.absolute

绝对定位可以将元素从文档流中移除，并且不占用本来的空间，使得元素可以出现在任何位置。绝对定位的位置通过top、bottom、left、right属性调剂。如果某个父级元素设置了position属性为relative或absolute，那末该父级元素就变成了绝对定位元素，子元素的定位也将是相对该父级元素进行定位的。

4.fixed

固定定位会使元素脱离文档流，并且固定在页面的某个位置，不管页面转动到哪一个位置，该元素始终保持固定不动。通经常使用于实现顶部导航和自动播放的悬浮广告等效果。

总结

通过使用CSS中的position属性，我们可以轻松实现元素的定位和层叠。静态定位通过默许的文档流自动排布元素，在一些静态页面中比较适用。相对定位会相对元素本来的位置进行位移，适用于微调元素位置。绝对定位能够从文档流中移除元素，并在页面任何地方定位，适用于动态布局。固定定位则适用于需要在页面转动时一直保持位置不变的元素。

桂哥网络www.guIgege.Cn