引子
定位是网页设计中很重要且常用的基础知识。学习定义不是一个简单的事情，它需要反复的实践和体会。这里总结了一些定位的基础概念和常见例子。
总结了一些css 中关于定位的问题，和陷阱。
主要内容包括：
相对定位，绝对定位，fixed，浮动。
准备知识
参照物：元素定位的参考点。脱离参照物的定位是没有意义的。这就像物理中的参考系的概念一样。
四个偏移量：
top ， bottom ,left , right ， 分别定义相对于参照物 顶部，底部，左边，右边 的偏移量。
相对定位
position:relative;相对定位相对的是元素本身的位置。它的位置会根据偏移量移动，但是它的占用空间还是处于原来的位置。也就是说，视觉上它移动了，但是它的根（原本的位置）是不动的。
绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，则相对于body定位。
什么叫已定位？简单来说，就是设置过position的元素。上面引用来自w3school。
绝对定义的元素不会再占用原有的空间。一般弹出框，下拉列表都会使用绝对定义。
下面是一个例子：
第一个黄色块没有设置定位，所以默认处于它的父元素，绿色块的左-上方。元素的默认位置就在这里。之后的元素依次排开。
第二个黄色块设置了绝对定位，并且定位值是 right:0，表示和包含块的右边的偏移量为0。 可以看到它和灰色块（灰色块是包含它且最近的已定位元素，直接父元素-绿色快没有定位）的右边对齐了。这里并没有设置 top，所以它的垂直位置还在原来的地方。
下面是源码：
<style> div{ background-color:#DADACE; } #main{ position: absolute; width:300px; } #d0{ background-color:green; min-height:500px; width:200px; } #d0 pre{ width:80%; background-color:yellow; } #d0 .style2{ position:absolute; right:0; } </style><div id="main">
<div id="d0">
<pre class="style1">
就让我这样子漂流着
我很好 没事的
</pre>
<pre class="style2">
就让我这样子漂流着
我很好 没事的
</pre>
</div>
</div>fixed
fixed 设置的定位类似 absolute，但是它的包含块会被设置为视窗本身。如果需要设置一个相对窗口固定的元素，应该使用fixed。
下面的fixed元素，当页面滚动时，它的位置不变。一般用作导航条，或者一些需要位置固定的按钮，等等。
浮动 float
参考&其他
- div 中的内容是 如果你还在就好了 的歌词。挺不错的一首歌。很有感觉。