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;他的含义就是:固定定位。
这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。
老规矩,下方二维码期待你的加入,私信大叔,不管多晚一定给你回复哦,我在这里,我在这等你!
领取专属 10元无门槛券
私享最新 技术干货