CSS定位布局的三种运用

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

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

relative:相对定位

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

效果如下:

相对定位说明图

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

absolute:绝对定位

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

效果如下:

绝对定位说明图-1

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

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

效果如下:

绝对定位说明图-2

这下有祖先管着它啦,不嘚瑟了吧!

fixed :固定定位

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

效果如下:

固定定位说明图

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

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

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

绝对定位说明图-2

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

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

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180601G17OM000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券