2021-05-18

今天我们来讲一下Css中的position属性。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

所有浏览器都支持position属性。

position有以下四个常用的属性，分别是

position:static 默认状态
position:relative 相对定位
position:absolute 绝对定位
position: fixed 固定定位

现在我们再来一一讲解

position:static 默认状态，就是没有定位，元素出现在正常的流中（除了 top, bottom, left, right 或者 z-index 的）。

我为HTML添加了两个div，并添加了一个类，分别是one和two，并为one添加了宽度， 高度跟背景颜色，在加了个固定定位并设置了他的top、left值，也为two添加了宽度， 高度跟背景颜色，没有加position是因为position的默认值就是static，可以不用 写出来，懂的都懂，然后也设置了top、left值

下面我们来看看效果

可以看得出来第二个div设置的top、left值根本没有用，不光是top、left值，就连 right,bottom属性也不行

position：relative 相对定位 就是相对于自己的位置进行定位，比如：图像向上移动1px， 然后向下移动5px,最后得知图像距离最开始的位置向下移动了4px，（一般都跟绝对定 位一起用）

这边我们也是为HTML添加了两个div，并添加了类，分别是one和two，并为one添加了宽、高、背景颜色，并加了相对定位设置了他的top、left值分别为20px，也为two添加了宽、高、背景颜色，并加了相对定位设置了他的top、left值分别为20px

然后我们来看看效果

这个也看得出来，第一个div，它向下跟向左各偏移了20px，这里我要声明一下为什么 第二个图形离上面有一些距离，因为div是块级元素。

position:absolute绝对定位 就是可以用top,right,bottom,left.属性来改变它的位置 （可通过相对定位改变绝对定位的定位点，若绝对定位中的父元素设置了相对定位（或 者父辈元素设置了相对定位）那么绝对定位的定位点则是相对定位的4个角），如果绝 对单位的父元素设置了相对定位，而他的父辈元素也设置了相对定位，那他会优先选择 离他最近的那个元素，就是父元素。

这边我们为HTML添加了五个div，并添加了各自的属性，为了形成对比，所以把类名four的div放在类名为three中，为three设置了相对定位，four就是绝对定位，还有two也设置了绝对定位

下面我们来看看效果

不难看出来two是以父元素body为参照物的，而four则是以three为参照物

position: fixed 固定定位 不管怎么滑动页面都是在那个位置

这边我们为文本为橙色的div设置了固定定位

看看效果

这边我们看得到橙色一直都是在那个位置

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区提问喔！