标签：style blog http color io os ar 2014 div
position overflow float 几个属性比较容易混淆，写一段代码详解各自具体情况：
position在w3school的可能取值：
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
测试代码如下：
<html> <head> <style> #filp { width:100%; position: static; top:110px; font-size: 50px; line-height: 1px; } </style> </head> <body> <div id="div1"> <h2 id="glow">lighy</h2> <h2 id="blur">blure</h2> <div id="div2"> <h2 id="shadow">shadow</h2> <h2 id="filp">Flip===</h2> <h2 id="dropshadow">shshddddd</h2> <h2 id="wave">wavessss</h2> </div> </div> </body> </html>
显示效果如下：
从上图可以看出，”filp===“在正常流中的位置，就是其在html文档中从上到下，从左到右顺序位置；
接下来看看absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
修改代码中
#filp
{
width:100%;
position: absolute;
top:1px;
font-size: 50px;
line-height: 1px;
}
元素跑到左上角了，不是说”static 定位以外的第一个父元素进行定位“吗？应该是div=”div2“才是第一个父元素啊？fip===应该在blur下面才对啊！
后来查了另外一种解释：”absolute定位在其第一个absolute 或 relative的父元素，否则定位到body元素处“。这下就能解释为何跑到左上角去了！
需要注意一下，flip===离开后，其下面的元素上移，占据了其原来位置，这就是所谓”脱离正常流“，脱离了流，其流中位置自然就不被保留！
下面看看fixed：
改代码如下：
<html> <head> <style> #div1 { float:right; } #filp { width:100%; position: fixed; top:1px; left: 20px; font-size: 50px; line-height: 1px; } </style> </head> <body> <div id="div1"> <h2 id="glow">lighy</h2> <h2 id="blur">blure</h2> <div id="div2"> <h2 id="shadow">shadow</h2> <h2 id="filp">Flip===</h2> <h2 id="dropshadow">shshddddd</h2> <h2 id="wave">wavessss</h2> </div> </div> </body> </html>
其他元素都float到窗口右侧了，flip===在浏览器的左上角，这就是”相对于浏览器窗口进行定位“的位置，注意它是脱离正常流的！
我们再看看relative：
首先代码改成如下：
<head> <style> #filp { width:100%; position: relative; top:200px; left:200px; font-size: 50px; line-height: 1px; } </style> </head>
从上图可以看出，这个flip===跑到右下角，shadow下面有一行空行！那是filp===原来的位置；
”生成相对定位的元素，相对于其正常位置进行定位“，这里所谓正常位置就是”原来正常流中的位置“，以此位置为原点top left偏移！！
float：
上面float：right；可以看出，float：right是其浮动至窗口（通常是其父元素(默认为body文本区域)的左右边框）右侧，其左侧可以有其他块元素，假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。
而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。
overflow：
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
scroll：
修改js代码：
<head> <style> #div1 { overflow: scroll; width:300px; height:300px; } #filp { position: relative; top:200px; left:200px; font-size: 50px; line-height: 1px; } </style> </head>
上图是一个width:300px; height:300px;的窗口，右边和下面有scroll bar（苹果电脑看不到滚动条，截图效果不好，发挥发挥想象力！），来拉动可以看到被隐藏的内容：
visible：
先改代码如下：
<head> <style> #div1 { overflow: visible; width:300px; height:300px; } #filp { position: relative; top:200px; left:200px; font-size: 50px; line-height: 1px; } </style> </head>
visible就是显示超出部分的内容，如上图没有scroll bar 一览无余！
其余属性字面就很容易理解，不赘述了。
CSS position overflow float 属性 详解
标签：style blog http color io os ar 2014 div
原文地址：http://www.cnblogs.com/McQueen1987/p/3971829.html
