Wedding Dresses Outlet

视觉格式化模型和今天介绍的相对定位，绝对定位都属于我们定位概述的内容范畴里面。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。下面博百优CSS给大家举一个例子：

比如，将top设置为20像素，那么框将出现在原位置顶部下面20像素的地方。如果将left设置为20像素，那么元素左边创建了20像素的空间，这个应该很容易理解的。

#bobaiyou{

position:relative;

left:20px;

top:20px;

}

使用相对定位的时候，无论是否进行了移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。或者再简单地描述相对定位如下，可能会更加容易理解吧：

position:relative; 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下

左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。padding与

margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是

真正的移动，这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。

那么绝对定位呢？

博百优css：绝对定位使元素位置与文档流没什么关系。所以并不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在一样。

或者这样表达容易理解点：

position:absolute; 表示绝对定位，如果定义了这个属性的元素，其位置将依据浏览器左上

角的0点开始计算，并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容

区的某个地方就可以用到这个属性。

绝对定位的元素的位置相对于最近的已定位祖先元素，这使我们能够实现一些非常有意思的效果。例如，假设希望让一个文本段落对准一个大框的右下角。只需对包含框进行相对定位，然后相对于这个框对段落进行绝对定位：

#branding {
width: 700px;
height: 100px;
position:relative;
}
#branding.tel{
position:absolute;
right:10px;
bottom:10px;
text-align:right;
}
<div id=”branding”>
<p>tel:0845 838 6163</p>
</div>

固定定位

固定定位其实就是绝对定位的一个子类别。他们之间的区别在于固定元素包含块是视口，一般来说，博客评论表单采用固定定位，这使它在页面滚动时候一直出现在位置的相同位置，有助于改善易用性，提高用户体验良好性，但是貌似我们博百优的博客没有用到固定元素哦？不过我们常见的很多大网站之前一直在用，比如是一条常用的工具条在网站的顶部或底部，淘宝网有这样设计过。

不过 ，很悲剧，IE6和更低版本的浏览器不支持固定定位，所以要解决这个问题，得用JS在IE中重现这个效果了。改天博百优CSS也将导航栏用来测试一下效果，哈。最好当然要感谢《精通CSS：高级Web标准解决方案》一书的内容提供啦。

转载请注明来自博百优CSS，原文地址：http://www.cubiczd.com/bobaiyou/384