[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]**作业:**理解定位的原理,分别练习三种定位用途,把定位运用在开发中。