css 下拉框展示：当hover的时候展示下拉框 z-index的用法解释

代码如下：

<template>
  <div class="outer">
    <div class="left"></div>
    <div class="aTest2">
      <div class="box">显示方框</div>
      <div class="aTest3"></div>
  </div>
</div>


</template>

<style scoped lang='scss'>
.outer{
  display: flex;
  justify-content: space-between;
  position: relative;
  .left{
    height: 60px;
    width: 100%;
    position: relative;
    z-index: 100;  // 给他设置z-index的主要目的是遮挡动画 transform  要不动画会从顶部而不是现在的位置移动
    background-color: deeppink;
  }
  .aTest2{
    .box{  // 给他设置z-index的主要目的是遮挡动画 transform
      position: relative;
      z-index: 100;  // z-index的使用要结合 position
      width: 60px;
      height: 60px;
      background-color: pink;
      text-align: center;
      line-height: 60px;
      &:hover {  // 加的是box的hover事件
        background-color: yellow;
      }
    }
    &:hover {  // 加的是aTest2的hover事件
      .aTest3 {
        opacity: 1;
        transform: none;
      }
    }
    .aTest3{
      width: 200px;
      height: 300px;
      position: absolute;
      z-index: 1;
      right: 15px;
      top: 60px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

      transform: translateY(-200px) scale(1, 0);
      transition: all 0.4s, 0.2s;

      margin-top: 15px;
      &::before {  // 利用伪元素画三角
        content: "";
        position: absolute;
        right: 14px;
        top: -10px;
        width: 20px;
        height: 20px;
        background: #fff;
        transform: scale(0.6, 1) rotate(45deg);
        box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>

展示结果如下：

需要注意的是z-index的使用需要结合位置position（absolute，relative都行）否则z-index无效