CSS定位布局的三种运用

说到定位布局，自然而然会想起，会想到 的三种属性值： 、 、 ;实际上还有另外一种属性： ，咦？这是啥玩意，我咋没见过呢，其实这个定位属性呢，还是 的默认值呢，就是不定位，O(∩_∩)O哈哈~

不定位我还写你干啥，所以呢，我们平时是不用的，我们就好好说说我们的常用的三种属性值 、 、 。

relative：相对定位

relative相对定位，那么相对于谁定位呢，就是相对于它本身啦，relative是一个很贪心的孩子，占着碗里的还看着锅里的，定位了，还不放弃自己原有的位子╭(╯^╰)╮；为什么它这么霸道呢，因为它自己原来的位置是它的定位基点，它要相对于它原来的位置进行定位。下面我们来看一下效果喽：

效果如下：

相对定位说明图

通过上图可以看出来， 真是太贪心了是不是？

absolute：绝对定位

相对于relative来说，咱们的 就没有那么贪心啦，但是呢，比较淘气，可以脱离文档流快乐的玩耍。但是也不是没有任何约束的，绝对定位的定位方式是相对于它最近的定位元素来定位的（position: static是不算的！），如果没有定位的祖先元素，它就霸气的按照 来定位啦，说的这么绕，听不懂肿么办？话不多说，上demo！

效果如下：

绝对定位说明图-1

我们明明让它向下向右定位的，它竟然跑偏了，好气呀！

莫气，莫气，这是因为没有已定位的祖先元素约束它，没人管，它就浪开了，相对于 进行绝对定位啦，那么接下来我们就管管它。

效果如下：

绝对定位说明图-2

这下有祖先管着它啦，不嘚瑟了吧！

fixed ：固定定位

说完了霸气的相对定位，讲罢了淘气的绝对定位，接下来我们要聊一聊高冷的固定定位，为什么说 高冷呢，因为它是相对于浏览器窗口进行定位的，它的定位位置和文档、祖先元素都没有关系，页面怎么滚动，你爱咋咋地，它就认准了一个地方不再移动，任尔上下划鼠标，我就只在这儿飘，嘿嘿。

效果如下：

固定定位说明图

不管滚动条怎么滚动，高冷的 定位的元素依旧固定在原来的位置，一动未动。

z-index ：不得不说的堆叠顺序

不管是 、 或是 它们都离开了它们原来的位置，显示在定位后的位置，这就导致了抢镜头的现象，会把其它老老实实待在原地的元素给遮挡掉。

绝对定位说明图-2

如果我们不想让某个元素未定位的元素被遮挡，应该怎么办呢，很简单：给被挡住的元素添加一个 相对定位，不需要加定位位置，然后再加一个 属性就好啦！

属性的值越大，它对应的位置越靠上，越能实力抢镜！

对于两个已定位的元素的堆叠顺序调整就更简单啦，只要改变 的值就OK啦。

想了解更多编程内容，请关注技术学派。