position定位

　　前几天看了寒冬大神的一篇博客，发现自己虽然说基本懂得position定位的4个基本的属性，可是真正想要回答寒冬大神在里面提到的问题，还有很长的路要走，所以特定重新研究一下定位问题。之前一直接触各种各样的东西，可是都没有完全深入研究并且总结，以后的日子要好好准备总结，努力加油啦（哈哈，话外题）。

position:relative | absolute | fixed | static | inherit

值	描述
relative	生成相对定位的元素，相对于其正常位置进行定位(最外层是以body作为定位原点)。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素；其层叠通过z-index属性定义。
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。脱离正常文档流(最外层是以html作为定位原点)。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定；其层叠通过z-index属性定义。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。脱离正常文档流。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定；其层叠通过z-index属性定义。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）(最外层是以body作为定位原点)。
inherit	规定应该从父元素继承 position 属性的值。

上面是关于W3C的教程，学前端的人对于它们的定义应该很熟悉了。

下面是关于更深入的研究：

1.static | absolute | relative最外层以哪些元素作为定位原点，依次是body | html | body

(1)看看static和relative的代码示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         .aa{
 7             position: static;/*与relative一样，相对于body*/
 8             top:0;
 9             left:0;
10             height: 10px;
11             width: 100px;
12             background-color: red;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="aa"></div>
18 </body>
19 </html>

View Code

运行代码可知与浏览器窗口有一定的距离，因为body在不同浏览器中有一定的margin。

(2)看看absolute的代码示例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         .aa{
 7             position: absolute;
 8             top:0;
 9             left:0;
10             height: 10px;
11             width: 100px;
12             background-color: red;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="aa"></div>
18 </body>
19 </html>

View Code

运行代码可知紧贴着浏览器窗口左上角，即相对于html。

PS：这里是指如果元素没有父元素，那其相对于最外面的元素其定位原点是哪些。

2.absolute:

(1)如果元素加了position:absolute或者display:inline-block，并且该元素的宽度是没有设定大小，默认100%的话，那么元素就会自适应其内部元素的宽度。例子如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         .div { padding:20px; margin-bottom:10px; background-color:#ddd; }
 7         .pos { display:inline-block; }//或者position:absolute;
 8     </style>
 9 </head>
10 <body>
11     <div class="div">
12         <img src="xx.jpg" />
13         <p>无absolute</p>
14     </div>
15     <div class="div pos">
16         <img src="xx.jpg" />
17         <p>有absolute</p>
18     </div>
19 </body>
20 </html>

View Code

(2)平时我们想给行内元素设置宽高度，一般会给行内元素一个display:inline-block，但是一旦给他们设置了float:left;或者position:absolute之后，也是可以设置宽高度的，这样的话，就不用再设置display了。

(3)absolute是不占据正常文档流位置的，所以当一个元素的内部元素设置了absolute的时候，这个元素是不会根据内部元素而自动扩展它本身的大小的（如果原本的宽度没有固定的话），因为设置为absolute的元素是不会占据空间，自然包含它的元素也不知道其内部的元素占据了多大的空间来扩展自己的宽高度啦。例子如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         div{
 7             background-color: red;
 8             margin:20px;
 9             padding:20px;
10             border:1px solid red;
11             float: left;
12         }
13         .aa{
14             display: inline-block;
15             width: 50px;
16             height: 50px;
17             background-color: blue;
18         }
19         .bb{
20             position: absolute;
21             width: 50px;
22             height: 50px;
23             background-color: blue;
24         }
25     </style>
26 </head>
27 <body>
28     <div>
29         <span class="aa"></span>
30     </div>
31     <div><span class="bb"></span></div>
32 </body>
33 </html>

View Code

PS：张鑫旭大神说了一句话：想重构高质量的页面，少用绝对定位布局！

(4)absolute相关的几种隐藏方式:

.hidden{//（第一种）
    position:absolute;
    top:-9999em;
}

.hidden{//（第二种）
    position:absolute;
    visibility:hidden;
}

.hidden{//（第三种）
    position:absolute;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}
对应的显示方式：

dom.style.position = "static";（第一种）

dom.style.position = "static";（第二种）
dom.style.visibility = "visible";

dom.style.position = "static";（第三种）

3.relative：

(1)相对于原本位置偏移，会保留原本的位置，但是偏移的位置不会影响其他元素的布局，只是原本的位置会占据实际的空间。

(2)在没有设置z-index的时候，relative默认会高于同级元素，即如果设置了margin为负值的话，已经设置了relative的元素会默认覆盖其他元素。

(3)在IE6浏览器下，haslayout下的元素负margin超出父标签的部分会被隐藏掉。但是如果给设置了负margin的元素设置了relative的话，元素超出父标签的部分就不会被隐藏。例子如下：

没有加上position:relative的代码以及在IE6下的效果图：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script type="text/javascript" src="jquery.js"></script>
 6     <style type="text/css">
 7         div{
 8              100px;
 9             height: 100px;
10             margin-top: 20px;
11             background-color: red;
12         }
13         span{
14             display: block;
15              100px;
16             height: 100px;
17             background-color: pink;
18             margin-top: -40px;
19         }
20     </style>
21     <script type="text/javascript">
22     
23     </script>
24 </head>
25 <body>
26     <div>
27         <span></span>
28     </div>
29 </body>
30 </html>

View Code

加上position:relative的代码以及在IE6下的效果图：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <script type="text/javascript" src="jquery.js"></script>
 6     <style type="text/css">
 7         div{
 8              100px;
 9             height: 100px;
10             margin-top: 20px;
11             background-color: red;
12         }
13         span{
14             position: relative;
15             display: block;
16              100px;
17             height: 100px;
18             background-color: pink;
19             margin-top: -40px;
20         }
21     </style>
22     <script type="text/javascript">
23     
24     </script>
25 </head>
26 <body>
27     <div>
28         <span></span>
29     </div>
30 </body>
31 </html>

View Code

PS:上面的代码有一个css hack，在现在浏览器以及新版的IE中查看效果是跟上面两个图片的效果不一样的，具体的解释见另一篇博客：

关于collapsed margin（外边距合并）

(4)relative还有一个重要的知识点：宽度分离原则。（这个留着有空继续补充）

本人参考的资料如下：

http://www.cnblogs.com/winter-cn/archive/2013/05/11/3072926.html

http://www.w3school.com.cn/cssref/pr_class_position.asp

http://www.zhangxinxu.com/wordpress/?p=1287

http://www.zhangxinxu.com/wordpress/?p=1463