CSS的定位属性

毫无疑问，这是所有CSS学习中最重要的部分，想要您的网页做到浏览器兼容，就必须建立最为稳固的层关系，而这一部分就是靠定位为属性完成的!

首先是 position属性，我想很多人一定对这个属性很纠结。首先，大多数层定位都采用相对定位（relative）做法，而一个层建立后其默认就是相对定位的，所有如果在你的网页里都采用相对定位的话，你实际上是不需要使用position这个属性的。

那到底什么时候才需要使用 position 呢，其实，当你使用绝对定位 （absolute） 得时候，所有的这些属性你就都得用上了position，
z-index，top，right，bottom，left。

其实你可以发现，当你使用 position:absolute; 的时候，你就必须使用 top，right，bottom，left 属性，他们是可以准确控制这个层在浏览器里的位置。但是实际上是，每个人的电脑不一定一样，所以你所显示的位置不一定别人也是这样。

position:absolute; 其网页解释通常是相对浏览器边框的距离，而这一般都不是我们想要的结果或方式。在实际应用中，position:absolute; 都是要配合position:relative;使用的，也就是说 在父层使用 相对定位（relative）属性；子层使用绝对定位（absolute）;向这样：

<div style="position:relative; border:red solid 1px; height:100px">
<div style="position:absolute;  top:10px; left:10px; height:50px; width:200px; background:#ccc;">position:absolute; </div>
</div>

效果：

外面层使用 position:relative;之后不会与其他相对定位成产生冲突，再在内部层使用 position:absolute;，那这个子层的绝对位置就是相对于父层来计算，而不是按照浏览器了。

还有最后 z-index，这个属性只有在绝对定位时候才会用到，假使几个绝对层重叠了，用这个属性来绝对谁显示在前面。