解析CSS的相对定位和绝对定位

通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果。

还有z-index属性在这时也不会生效。

也就是说我们平时如果不给某元素一个position属性的声明，那么它默认的就是我上述的这种情况，不过因为有了浮动，所以通常情况下我们还真不需要给元素设置position属性！

但是某些特殊的情况下，我们不得不用到position属性，那我们今天就讲讲position属性的relative和absolute值

绝对定位

语法：position：absolute

偏移绝对定位元素的位置语法

left 左

right 右

top 上

bottom 下

概念： 相对于定位父级进行定位 如果没有定位父级则会在css中一层一层向上寻找， 直到找到body [浏览器的窗口]。 有定位父级则相对于最近定位父级去进行定位。

解析：

我分为有定位父级以及没有定位父级俩种情况，这里咱们在下面展开讲一讲

一 有定位父级定位情况下 相对于最近的定位 （父级）去进行定位 ，这里注意!是定位父级,如果是兄弟关系的定位就算兄弟是相对定位 它是不会定位到相对定位兄弟的身上 毕竟它不会听兄弟的话 所以 我们一般称为 父相子绝***

接下来；咱们看下面的图片及其代码

如图我们可以看到 处于子元素的绿盒子 是以body为点来进行位置偏移的

如果给他的父亲元素添加相对定位 是什么样的情况呢 看下图

我们可以看到 它相对于自己的最近的父亲进行了定位偏移

绝对定位的概念既然已经说清了，那么我们接下来讲一讲它的特性 我想大家应该都知道元素都遵循普通文档流是垂直向下排列，那么咱们给处于普通文档流的第2个元素绝对定位会发生什么。如下图。

我们可以看到原本应该在box1下面的盒子上去了

行级标签是不能设置宽高的 如果将行级标签放入已经设置过绝对定位的元素中 ，它就可以

设置宽高。

由此可知，绝对定位的特性如下

1 脱离文档流

2 提升层级

3 可以使内嵌元素设置宽高

下面我们讲相对定位

相对定位：

{相对于元素本身的位置发生移动}

相对于元素在正常文档流中的位置移动它，把一个正常文档流

从他的默认位置按坐标进行移动

*/ /* 表象移动了但是实际位置还在占位 */

/*

定位属性：position

取值：relative

特性：

1 不会脱离文档流

2 提升层级

3 在不定义位置偏移属性时，对元素没有影响

使用场景：一般搭配绝对定位使用 当做绝对定位的复级 {父相子绝}

*/

/*

位置侧移量（坐标）

位置属性；

top 设置距离包含块body顶部的距离

bottom 设置距离包含块底部的距离

left 设置距离包含块左侧的距离

right 设置距离包含块右侧的距离

网页坐标轴 横x下y

到这里呢 我对于相对绝对定位的理解就结束了，如有缺少的知识点还请各位大神评论补充，

如有不对的也请评论指出。最后，喜欢的可以给个点赞嘛 。

谢谢你的观看。