CSS的相对定位，绝对定位，固定定位，及元素重叠（层级问题）

CSS的相对定位，绝对定位，固定定位，及元素重叠（层级问题）

---

1.项目问题及思考：

1.1 问题一（关于定位问题）

最近在做vue项目时，遇到这样一个需求，需要在Echarts的柱状图左侧的title的text文字内容加一个鼠标悬浮的文字提示，刚开始想了一下，因为柱状图属于Echarts中的，样式都是固定的，没有相关的文字提示样式,最后想到借助css的定位拼接到Echarts中，再借助ElementUI中的Tooltip组件的文字提示即可解决，针对以上问题我又再次对css的定位进行了一个全方位的了解。

---

1.2 问题二（关于重叠即层级问题）

在项目中，碰到两个div盒子,盒子一绑定了点击跳转事件，而盒子二并没有绑定事件，但是盒子二由于高度较大将盒子一覆盖掉了，导致点击事件无法跳转，解决方法有两种：
(1)将盒子二的高度设置的较小一些，避免覆盖住盒子一
(2)将盒子二的z-index设置的数值变大一些（注意不要为了方便将其设置成较大的值，eg: z-index:999）

---

2.关于position：

注意：
(1)position默认值为static,如果在css中不指定，则默认为static.
(2)相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。
(3)相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种：

---

3.相对定位：

对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意，在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间.
建立3个方块，如下图所示：

为第二个块设置了相对定位position:relative，如果不对齐设置偏移量，则不会发生变化。如果为其设置上偏移量left:50px ; top:30px，则其变化如下图：

  这是我们可以看到第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。

---

4.绝对定位

  被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除。其和相对定位的不同点在于，相对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来。
  绝对定位的参考对象就不是自己了，而是最近的已设置了position的祖先元素，并且position不是static，而是absolute或者relative。首先看它的父元素是否设置了position为absolute或者relative，如果有就按父元素的左上角作为参考点，如果没有则再找祖父元素、曾祖父元素、高祖父元素，如果都没有就以页面文档的初始位置作为参考点。
  绝对定位的元素相对于谁来定位，我们就把这个"谁"叫着参照物，看下图理解 ：

举个小例子，我们先看一下没有使用绝对定位的图片的样式：

这时给第二个块设置绝对定位：position:absolute 然后再设置一个偏移：left:150px;top:40px; （在设置偏移量的时候，我们可以设置负值）这时就变成了下图所示：

要使用绝对定位时，必须要有2个条件：（口诀：父相子绝）
　　 1、必须给父元素增加定位属性，一般建议使用position:relative
　　 2、给子元素加绝对定位position:absolute，同时要加方向属性（指left、right、top、bottom属性）

相对定位与绝对定位总结

  (1)绝对定位元素脱离正常流(文档流)，所以元素原来的位置会被其他元素占用。因为绝对定位元素脱离了正常流，和相对元素一样也会有覆盖其他元素的情况。
  (2)绝对定位元素是相对于祖先元素，和相对定位不同，相对定位是相对于元素自己原来的位置。绝对定位元素的祖先元素是设置的position: static，该祖先元素并不作为参考物。 绝对定位元素的祖先元素有多个都设置了position: absolute或position: relative ,那么是以最近的一个祖先元素作为参考物，即相对于最近的那一个祖先元素进行移动定位

---

五、固定定位

  将元素放置在浏览器窗口的固定位置，拖拽窗口时元素位置不变。它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

---

六，元素重叠（层级问题）

  使用了定位,元素会提升一个层级(如果与别的元素发生重叠,会在别的元素上面)如果多个元素同时开启了定位.层级都一样的情况下.如果发生重叠.则后面的元素会盖住前面的元素。如果想调整层级 可以使用z-index:来调整层级,需要注意的是，没有开启定位的元素不可以使用z-index属性

验证z-index

分别把blue green red的z-index设置为999 99 9，但是看上去好像和之前没什么变化，原因是因为Z-index只能工作在被明确定义了absolute，fixed或relative 这三个定位属性的元素中，所以我们继续对css做一些修改。
如图所示，显示的顺序已经按照我们设置的z-index大小展现了

多个父元素中子元素的z-index设置

在原基础之上，我们对html和css做一些改动，验证一下父元素不同的情况下 ，子元素设置不同的z-index显示效果

可以很明显的看出，不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染.

  absolute是一个能够独当一面的属性，其使用可以不要relative，当然，也可以不使用z-index。在默认情况下，元素应用了非static的position属性后，其就会有一个隐晦的层级，会居于普通元素之上，无需额外设置z-index属性值。

---

总结

(1)绝对定位根据父元素为基准点进行定位，它会脱离文档流，不占用原来位置空间
(2)相对定位根据自身为基准点进行定位，离开原位置，但是还是会占用原来位置空间
(3)固定定位根据浏览器窗口为基准点进行定位，它始终在一个位置，不会移动