css定位属性

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。

	position: absolute;  <!-- 绝对定位 -->position: relative;  <!-- 相对定位 -->position: fixed;     <!-- 固定定位 -->

绝对定位

**绝对定位的盒子脱离了标准文档流。**所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：
如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角：
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。

以盒子为参考点

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。

如下：（子绝父相）

以下几点需要注意。

（1）要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：

		<div class="box1">        相对定位<div class="box2">    没有定位<p></p>           绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素</div></div>

再比如：

		<div class="box1">        相对定位<div class="box2">    相对定位<p></p>           绝对定位，将以box2为参考，因为box2是自己最近的父辈元素</div></div>

（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
（3）绝对定位的儿子，无视参考的那个盒子的padding：

让绝对定位中的盒子在父亲里居中

我们可以总结成一个公式：
水平居中：

left:50%; margin-left:负的宽度的一半
垂直居中：
top:50%; margin-top:负的宽度的一半

相对定位

	position: relative;left: 50px;top: 50px;

相对定位不脱标

相对定位：不脱标，老家留坑，别人不会把它的位置挤走。

也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。

相对定位的用途

如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：

（1）微调元素
（2）做绝对定位的参考，子绝父相

相对定位的定位值

left：盒子右移
right：盒子左移
top：盒子下移
bottom：盒子上移

PS：负数表示相反的方向。

固定定位

用途1：网页右下角的“返回到顶部”
例：

html">	<style type="text/html" title=css>css">html" title=css>css">.backtop{position: fixed;bottom: 100px;right: 30px;width: 60px;height: 60px;background-color: gray;text-align: center;line-height:30px;color:white;text-decoration: none;   /*去掉超链接的下划线*/}</style>