标签：
以防自己忘记写的 网上找的
positon 与 display 的相互关系
元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位
<span style=”position:absolute; width:100px; height:50px;”>span</span>这是完全正确的，
<span style=”position:absolute; display:block; width:100px; height:100px;”>span</span>，这里的display:block就是多余的了。
position 与 float 的相互关系
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
position: relative和position: absolute 都可以改变元素在文档中的位置，设置position: relative 或 position: absolute都可以让元素激活left、top、right、bottom 和 z-index 属性。
网页虽然看起来是平面的二维结构，但它其实是有z轴的，z轴的大小由z-index 控制，默认情况下，所有元素都是在z-index: 0 这一层的，这就是文档流。设置position: relative 或 position: absolute会让元素浮起来（就像游戏中的概念-多层图层），也就是z-index大于0，它会改变正常情况下的文档流。不同的是position: relative 会保留自己在z-index:0 层的位置，但是它的实际位置可能因为设置了left、top、right、bottom值而偏离原来在文档流中的位 置，但对其他仍然在z-index:0层的元素位置不会造成影响。而position: absolute会完全脱离文档流，不再在z-index:0层保留占位符，其left、top、right、bottom 值是相对于自己最近的一个位置–设置了position: relative 或 position: absolute的祖先元素的，如果祖先元素都没有设置position: relative 或 position: absolute，那么就相对于body元素。
除了position: relative 和 position: absolute，float也能改变文档流，不同的是，float属性不会让元素“上浮”到另一个z-index层，它仍然让元素在z-index:0 层排列，float不像position: relative 和 position: absolute那样，它不能通过left、top、right、bottom属性精确地控制元素的坐标，它只能通过float:left 和 float:right 来控制元素在同层里“左浮”和“右浮”。float会改变正常的文档流排列，影响到周围元素。
另一个有趣的现象是position: absolute 和 float会隐式地改变display类型，不论之前什么类型的元素（display:none除外），只要设置了position: absolute 或 float中任意一个，都会让元素以display:inline-block的方式显示：可以设置长宽，默认宽度并不占满父元素。就算我们显式地设置 display:inline或者display:block，也仍然无效（float在IE6 下的双倍边距bug就是利用添加display:inline来解决的）。值得注意的是，position: relative却不改变display的类型。
1、position 对 float 的影响：float 可以说是定义同辈元素之间的位置关系，浮动元素相对于父元素，其位置的定义是确定不变的的：基于position:static/relative时的位置，向左侧或右侧靠近(一个可能的错误的认识是，浮动元素会向左上角或右上角浮动)，
因此，position:static 和 position:relative 与 float 的效果可以叠加，
但 position:absolute、position:fixed 这两个定位属性依赖于自身元素之外的参照，将使 float 的效果无法表现出来。
2、浮动元素对文本的影响：浮动概念的基础是图文混排，因此同辈元素的在排版时如果浮动元素与非浮动元素之间发生覆盖，无论是谁覆盖谁，非浮动的元素内的文字将会被挤走，如下例：
.elm{ width:100px; height:50px;background:green; border:1px solid red; }
.lf{float:left; }
float
no float，被挤走
3、浮动元素对父元素的影响：浮动元素的父元素丢失 block 高度，即使定义了高度，也无法影响其同辈浮动元素及其浮动的子元素的布局，默认情况下，如果父元素没有定义高度，则父元素的内容会撑开父元素，达到自适应 block 高度的效果，浮动元素无法撑开其父元素的block 高度。
4、浮动元素对自身的影响：浮动元素将按 inline-block 形式布局（haslayout），即使将他设置为 display:inline;，因此，默认宽度自动扩展为100%的元素浮动之后，宽度由元素内容撑大，原来没有高宽属性的元素也变得可以定义高宽；如果出现重叠，浮动元素将叠加在非浮动的同辈元素之上（像是具有更大的z-index值）；
使用场景:
照片墙, 选项卡, 导航条等可以使用inline-block或float, 推荐inline-block, 但需要注意浏览器兼容, 用float记得习惯性的使用clear.
Tip等提示, 悬浮窗, 遮罩等, 建议使用position.
标签：
原文地址：http://www.cnblogs.com/baimiaolei/p/5627755.html
