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;他的含义就是：固定定位。

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

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