CSS常用属性二 定位

CSS Position(定位)

定位：通过position指定元素在页面中的摆放位置，可选值：
position: static;   默认，无定位;
position: relative; 开启相对定位，相对于自身位置进行定位
position: absolute; 开启绝对定位，相对于父元素中最近一个position定位
position: fixed; 开启固定定位，相对于浏览器窗口定位；

1.开启了相对定位后，设置偏移量，元素才会有变化，例 ：
第一步  position: relative;
第二步  left: 100px;   (可选left,right,top,bottom)
设置左100就是向右移100的意思

2.相对定位 是相对于元素在文档流中原来的位置进行定位（也就是相对于左上角）
3.相对定位的元素不会脱离文档流，也就是说，移动后，原来的位置还空着，就像灵魂出窍
4.相对定位可以使元素提升一个层级，也就是可覆盖兄弟元素
通常偏移量只需要使用一个水平方向和一个垂直方向就可对一个元素进行定位 ，如：
第一步  position: relative;
第二步  left: 100px;   (可选left,right,top,bottom)
        top: 100px;
5.相对定位不会改变元素的性质，块还是块，内联还是内联。

绝对定位 ：
position: absolute;
1.开启了绝对定位后，元素会脱离文档流，如果不设置偏移量，元素的位置就不会变化。
2.绝对定位是相对于离它最近的开启了定位的祖先元素进行定位的，
3.一般情况下，开启了子元素的绝对定位都会同时开启父元素的相对定位
4.如果所有的祖先元素都没有开启定位，则相对于浏览器窗口定位。
5.绝对定位会使元素提升一个层级，也就是会覆盖兄弟元素。
6.绝对定位会改变元素的性质：内联元素会变成块元素，块元素的宽度和高度会被内容撑开。

固定定位（也是一种绝对定位，大部分特点都和绝对定位一样）：
position: fixed;
固定定位与绝对定位的不同点：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
IE6不支持固定定位