CSS之position详解
作者：邹阳 | 发表于：2016-04-17 14:53:44
阅读量：（214） | 所属栏目：编程
CSS position 属性 (当使用 position 属性时，请始终设置 !DOCTYPE 声明 当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。)
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：设置了定位的元素，层级默认会被提高，定位元素默认后者层级高于前者
static 默认值.元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框相对于原来的位置偏移某个距离，它在普通流中占据的位置仍然保留着。可以设置left、top 的值，往右下偏移多少距离。也可以设置right、bottom相反意思，往坐上偏移多少。
absolute 元素框从文档流完全删除，就好像元素原来不存在一样；并相对于距离它最近的那个设置了定位的祖先元素来定位（该祖先元素可以是块级元素，也可以是内联元素），定位的基准以祖先元素边框为准，不包含祖先元素的margin区域。如果所有祖先元素都没有设置定位，那么就相对于document来进行定位（不是body哦，浏览器默认body有margin 8px的）。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。可以设置top、left、right、bottom值。top：0px；right：0px； 则定位到右上角。绝对定位会覆盖页面上的其他元素，可以通过z-index属性来控制堆放顺序。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index最大值为2的31次方。
fixed 元素框的表现类似于将 position 设置为 absolute，不过它只是以浏览器窗口为基准进行定位的。 IE6中不被支持，兼容IE6的话，就得 _position: absolute 去模拟将元素positon属性的absolute值通过js动态改变为fixed的时候，改变后的top和left值默认为之前元素相对于浏览器窗口时的位置的值。
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：设置了定位的元素，层级默认会被提高，定位元素默认后者层级高于前者
static 默认值.元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框相对于原来的位置偏移某个距离，它在普通流中占据的位置仍然保留着。可以设置left、top 的值，往右下偏移多少距离。也可以设置right、bottom相反意思，往坐上偏移多少。
absolute 元素框从文档流完全删除，就好像元素原来不存在一样；并相对于距离它最近的那个设置了定位的祖先元素来定位（该祖先元素可以是块级元素，也可以是内联元素），定位的基准以祖先元素边框为准，不包含祖先元素的margin区域。如果所有祖先元素都没有设置定位，那么就相对于document来进行定位（不是body哦，浏览器默认body有margin 8px的）。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。可以设置top、left、right、bottom值。top：0px；right：0px； 则定位到右上角。绝对定位会覆盖页面上的其他元素，可以通过z-index属性来控制堆放顺序。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index最大值为2的31次方。
fixed 元素框的表现类似于将 position 设置为 absolute，不过它只是以浏览器窗口为基准进行定位的。 IE6中不被支持，兼容IE6的话，就得 _position: absolute 去模拟将元素positon属性的absolute值通过js动态改变为fixed的时候，改变后的top和left值默认为之前元素相对于浏览器窗口时的位置的值。