css中的定位
上一篇博客，我大概介绍了下浮动的使用及行为。其实在整个文档布局中，定位也对我们整个的页面排版有非常好的帮助，当然前提是使用得当。
一、定位分类：
a、静态定位 position:static; ：元素按照正常的文档流顺序出现，位置等不产生任何改变(文档流的默认属性)。
b、相对定位 position:relative;：元素盒会产生移动，并且它在文档流中的原始空间会保留下来。
c、绝对定位 position:absolute;：元素从文档流中脱离出来，相对于容器块产生移动，原始空间不会被保留，周边元素将会占据它原来的空间。
d、固定定位 position:fixed;：元素从文档流中脱离出来，但是他们是相对于浏览器（视口）产生的位置的改变。目前有些浏览器不支持该种定位方式。
注：对于被设置为静态或相对定位的非根元素，容器块是它最近的块级元素、表格单元的内容区的边缘。
对绝对定位的非根元素，容器块是它最近的不是静态定位的祖先元素（即它的父级元素必须为position:absolute;或者position:relative;或者position:fixed;）
二、position 的属性：
当一个元素的position 定位类型一旦被确定后，它有四个偏移属性：top right bottom left (四个属性的值可以设置为：长度、百分比或者auto;)
a、相对定位：position：relative;
(top right bottom left )相对于它们在文档流中的初使位置进行定位，没有设置偏移属性的，默认值设为auto;
在文档流中所占据的原始空间被保留；
可能会覆盖其它元素；
当设置为相对定位时，使层位置产生偏移，但并不影响文本流中接下来其它层的位置；
当设置为相对定位时，层的层叠级别高于文本流的级别（即优先顺序是越靠近越产生影响）；
当两个元素设置为相对定位时，同等级别下会按照文本流的顺序层叠显示。
.a {position:relative;top:100px;left:100px;}
b、绝对定位：position:absolute;
(top right bottom left )相对于容器块边缘（包括margin值）进行定位，没有设置偏移属性的，默认值设为auto;
在文档流中占据的原始空间不被保留；
当设置为绝对定位时，该层将从文档流中脱离，以该层所在的容器块的坐标原点为参考进行偏移，不会对其它元素产生任何影响；
注意：当容器块没有设置position属性或者position属性为static时候，将以body或html的坐标原点为参考。
.b {position:absolute;top:100px;left:100px;}
注意：建议文档流中慎用position属性，尽量使用float属性来对文档流相关元素进行定位！！！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
