标签：
在之前的面试中被问过这个问题好几遍，每次回答的都不尽人意 这次好好整理下 记录下来
首先position提供一些属性来让我们实现定位的功能，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
position的属性值，
static:默认值 元素出现在正常的流中，块级元素会生成一个矩形框，行内元素会生成一个或多个行框，置于其父元素中
inherit:规定从父元素继承父元素的position的值
fixed:生成绝对定位的元素，相对于浏览器进行定位窗口进行定位，这个属性的表型与absolute类似 只不过它的包含块是浏览器窗口本身，它也脱离了原来的文档流的布局，以相对于浏览器窗口的位置进行定位(表现是这个元素的位置相对于浏览器窗口的位置不变，即使你移动了滚动条)
relative:生成相对定位的元素，这个是相对于正常的位置进行定位的，元素仍然保持它未定位前的形状，即它原来是block level的仍然是block level 原来的inline-level的仍然是inline-level同时它原来在文档中的位置仍然保留，relative仍然属于基本的流布局
下面是一个例子
在这个例子中我们有两个段落 对第二个段落设置
#test { position: relative; left:20px; }
我们会发现他相对于它本身(也就是11111段落的位置向右移动了20px) 如果我们对段落设置了宽高 通过审查元素发现元素的大小没有发生变化
absolute:生成绝对定位的的元素，相对于static以外的第一个父元素进行定位，如果它的所有父元素都没有设置定位 那就相对于最外层的body进行定位，可以通过设置left top bottom right设置元素在包含块的相应位置，并且设置了absolute的元素会生成一个块级框，进行之后的布局，这种定位脱离了原来的文档流
详解position:absolute
我们可以通过设置left right top bottom来控制元素相对于包含元素的位置
1）当我们没有设置left top right bottom时的表现
这时它会相对它的直接父元素以top：0 left：0进行定位(脱离了原本的文档流)
请看下面的例子
<div> <img src="1.jpg" alt=""> <p>1111111111111111111111111111</p> </div>
body,p{ margin:0; } div { width:200px; margin:20px; background: lightblue; }
在一个div中我们包含一个图片和一个段落p
在这里我并没有父级的div设置高度 父元素的div高度由img的高度和p(这里的p是块级元素，可以设置高度 当为span等行内元素的时候 高度由line-height决定)的高度和决定
当我们为img设置position:absolute的时候，一个似曾相识的场景出现了
跟之前遇到的float的塌陷的场景十分的类似，但是有些不一样的 这里img脱离了原来的文档流 所以此时父元素的高度直接又p的高度决定 并且这个img相对于这个div的左上角进行定位，会覆盖在之后的p，也就是造成了宽度和高度缺失（img实质还是存在高度的，因为它脱离了文档流才造成了这样的效果）
2）当设置了left top right bottom的时候
仔细的理解相对父元素第一个static以外的元素进行定位
有这样的一个页面结构
<div id="content"> <div id="a"></div> <div id="b"></div> </div>
body { margin:0; } #content { width:400px; height:400px; background: lightblue; margin:30px; } #b { width: 200px; height:200px; background: green; } #a { width:100px; height:200px; background: red; }
在页面中的上面这样的
当我们id为a的div设置相应的position:absolute 以及位置值的时候
#a { position: absolute; left: 0; top:0; width:100px; height:200px; background: red; }
我们发现他相对于body的左上角进行了定位 我们为父元素div(id为content)设置定位的时候呢
#content { position: relative; width:400px; height:400px; background: lightblue; margin:30px; }
发现他变成相对于设置了position:relative的父元素的左上角进行了定位
对于这点我们可以应用relative+absolute结合的方式达到float的效果
想想我们之前想要实现这样的一个效果
使一个超链接居左 一个超链接居右
<div id="content"> <a href="left" id="a">left</a> <a href="right" id="b">right</a> </div>
body { margin:0; } #content { width:700px; height:100px; background: lightblue; margin:30px; } a { color:red; } #a { float:left; } #b { float:right; }
我们可以使用上面方式 但是float存在着一定的问题 我们要去清除浮动等 下面我们可以使用这种relative+absolute的方式进行布局
body { margin:0; } #content { position: relative; width:700px; height:100px; background: lightblue; margin:30px; } a { color:red; } #a { position: absolute; left:0; top:0; } #b { position: absolute; right: 0; top:0; }
这样也达到了我们想要的效果（这样也有局限性，就是我们的元素脱离了文档流，比如我们在content元素中在加入其它内容的时候，会从content的元素的开始布局）
参考 http://www.cnblogs.com/bokin/archive/2012/12/14/2816864.html
http://www.w3school.com.cn/css/css_positioning.asp
标签：
原文地址：http://www.cnblogs.com/tiantianwaigong/p/4877684.html
