CSS中的position的属性

CSS position属性

有4种不同类型的定位：

【1】static：这是默认的定位类型，元素框正常生成，但是使用这个属性的时候，top,right,bottom,left都不能进行使用。一般来说，如果我们使用border的属性的话，就可以显示出一个长方形的框，它作为文档流的一部分。[文档流实际上指的就是文档中可显示对象在排列时候所占用的位置，也就是说一开始我们没有给它赋任何属性的时候，它最初的默认的位置，一般来说是自上而下，自左向右。块级元素一般都是自上而下，下一个元素会自动换行的，而内联元素则可以自左向右]行内元素可以创建一个或者多个框，置于在父元素中，但是这个框的大小不会发生变化的，除非设置display:block等，内联元素才可以设置框的大小。

【2】relative：元素框偏离某个距离。元素仍然会保持原来之前的形状，并且之前所占的空间仍然会保留，所以移动元素有可能会覆盖其他元素的，但可以使用z-inedx来设置元素的叠放顺序，z-index越大，就说明该元素就在越高层，z-inedx越小，该元素就放置在最底层。top,right,bottom,left等都可以进行设置。

【3】absolute：元素框是完全从文档流中脱离出来，并且是相对于其包含块进行定位的，它的定位是参照里它最近的祖先。元素原先在正常文档流中的所占的空间就会消失，后面的元素很可能取代该元素的空间。top,right,bottom,left等都可以进行设置。

【4】fixed：是相对于窗体来说的，经常用于导航栏或者最右边的导航栏，它不会随着页面的移动而移动，而是会一直固定在某个位置中。top,right,bottom,left等都可以进行设置。