Position定位 笔库鲁

static没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

relative不脱离文档流,参考自身静态位置通过top,bottom,left,right 定位,并且可以通过z-index进行层次分级。

absolute脱离文档流,通过 top,bottom,left,right定位。选取其最近的父级定位元素,当父级 position 为 static时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。

fixed固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

用法:用于元素定位

定位原理:

relative可以位移的元素 (相对定位)

在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然使得这些元素可以改变自己的位置,我们可以通过float来让元素浮动,我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移,因为,那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left,

默认情况下(static)

Relative(绝对定位)

absolute可以在任意一个位置的元素 (绝对定位)

相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分就需要用到绝对定位。

绝对定位不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。

绝对定位将可以通过top/left/bottom/rignt来设置元素,使之处在任何一个位置。在父层position属性为默认值时,top/left/bottom/rignt的坐标原点以body的坐标原点为起始;

ixed总在视线里的元素 (固定定位)

由于广告的滥用,使得一些浏览器软件都开始有了广告内容拦截,使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。

而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed;他的含义就是:固定定位。

这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。

老规矩,下方二维码期待你的加入,私信大叔,不管多晚一定给你回复哦,我在这里,我在这等你!

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

扫码关注云+社区

领取腾讯云代金券