[TOC] >[info]CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。 ### 相对定位 >[danger]相对定位是参照元素原来的位置进行移动，元素原有的空间位不变，元素在移动时会盖住其他元素。 ~~~ <style type="text/css"> p {position: relative;} </style> ~~~ ### 绝对定位 >[danger]绝对定位是元素完全脱离文档流，页面中的其他元素视他不存在，也就是说绝对定位元素不会影响到其他元素。 ~~~ <style type="text/css"> p {position: absolute;} </style> ~~~ ### 固定定位 >[danger]固定定位是元素完全脱离文档流，参照于可视区域，固定在可视区域中。 ~~~ <style type="text/css"> p {position: fixed;} </style> ~~~ ## 关于定位的说明 * 相对定位是参照元素在空间中的原有位置。 * 绝对定位是参照距离他最近的有定位属性的父级元素，如果父级元素没有定位属性，则会参照文档。 * 一般我们设置绝对定位时，都会找一个合适的父级将其设置为相对定位，不过最好为这个具有相对定位属性的 父级设置宽高这样在各个浏览器中表现不会出现问题。 ## 层级Z-index * 定义属性是脱离文档流的，也就是说他有可能盖住其他元素。 * 如果有多个定义属性存在，那么相互间就会存在遮挡的情况。 * 可以通过修改元素的Z-index属性来设置元素叠放的层 次，z-index值越高就会越在最上面。 ~~~ <style type="text/css"> p{z-index: 999;} </style> ~~~ >[danger]**作业：**理解定位的原理，分别练习三种定位用途，把定位运用在开发中。