vue加上雪花效果，内容文章无法点击

Question

在博客页面加了雪花效果的代码，结果无法点击文章和内容了

index.vue

<template>

  <el-container>

    <div class="background" :style="backgroundImage"></div>

    <cmsNavBar></cmsNavBar>
    <keep-alive>
      <cmsMain></cmsMain>
    </keep-alive>
    <el-footer height="40px">
      <cmsFooter></cmsFooter>
    </el-footer>
    

    <!--    雪花-->
    <snow></snow>

  </el-container>

</template>

<script>
  import cmsMain from './main.vue'
  import cmsNavBar from './NavBar.vue'
  import cmsFooter from './Footer.vue'
  //页面动画效果
  import snow from './snow.vue'
  // 引入背景图
  import backgroundImages from './backgroundImages.js'

  export default {
    data() {
      return {
        backgroundImages,
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    components: {
      cmsMain,
      cmsNavBar,
      cmsFooter,
      /*雪花*/
      snow
    },
    computed: {
      backgroundImage() {
        // 根据背景图数组的长度随机选择索引
        const randIndex = Math.floor(Math.random() * this.backgroundImages.length)
        return {
          // 获取对应的图片资源并将其设置到`background-image`属性上
          backgroundImage: `url(${this.backgroundImages[randIndex]})`
        }
      }

    },
  }
</script>

<style scoped>
  .el-footer {
    background-color: rgba(84, 92, 100, 0.5);
  }

  .background {
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0px;
    padding: 0px;
    top: 0;
    width: 100%;
    height: 120vh;
    position: fixed;
    z-index:-1;
  }

  @media screen and (max-width: 768px) {
    .title {
      width: 100%;
      background-position-x: center;
      background-position-y: 0;
    }
  }
</style>

相关vue文件

<template>
  <div id="main">
    <canvas id="canvas" ref="canvas" style="z-index: 100;position: fixed;top: 0;width: 100%;height: 90%;">
      您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
  </div>
</template>

<script>
//  import Footer from '@/components/Footer.vue'

export default {
  components: {
//          Footer
  },
  data() {
    return { //canvas init
      canvas: "",
      ctx: "",
      W: "",
      H: "",
      angle: 0,
      mp: 3000,
      particles: [],
      t: 0,
    }
  },
  mounted() {
    this._initCavas();
  },
  methods: {
    _initCavas() {
      this.canvas = document.getElementById("canvas");
      this.ctx = this.canvas.getContext("2d");

      //canvas dimensions
      this.W = window.innerWidth - 30;
      this.H = window.innerHeight - 10;
      this.canvas.width = this.W;
      this.canvas.height = this.H;

      //snowflake particles
      //雪花数量
      this.mp = 500;
      this.particles = [];
      for (var i = 0; i < this.mp; i++) {
        this.particles.push({
          x: Math.random() * this.W * 5, //x-coordinate
          y: Math.random() * this.H, //y-coordinate
          //改变大小
          r: Math.random() * 1 + 1, //radius
          d: Math.random() * this.mp //density
        })
      }
      clearInterval(localStorage.getItem('interval'));
      localStorage.setItem('interval', setInterval(this.draw, 25));
    },
    draw() {
      this.ctx.clearRect(0, 0, this.W, this.H);

      this.ctx.fillStyle = "rgba(37, 211, 236)";
      this.ctx.fillStyle = "border: 1px solid rgb(37, 211, 236,0.2)";
      this.ctx.fillStyle = "box-shadow: 0px 0px 3px rgb(37, 211, 236,0.5)";
      this.ctx.beginPath();
      for (var i = 0; i < this.mp; i++) {
        var p = this.particles[i];
        this.ctx.moveTo(p.x, p.y);
        this.ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
      }
      this.ctx.fill();
      this.update();
    },
    update() {
//              this.angle += 0.01;
      for (var i = 0; i < this.mp; i++) {
        var p = this.particles[i];
        p.y += Math.cos(this.angle + p.d) + 1 + p.r / 2;
        p.x += Math.sin(this.angle) * 2;

        if (p.x > this.W || p.x < 0 || p.y > this.H) {
          if (i % 3 > 0) {
            this.particles[i] = {
              x: Math.random() * this.W,
              y: -10,
              r: p.r,
              d: p.d
            };
          } else {
            if (Math.sin(this.angle) > 0) {
              //Enter fromth
              this.particles[i] = {
                x: -5,
                y: Math.random() * this.H,
                r: p.r,
                d: p.d
              };
            } else {
              this.particles[i] = {
                x: this.W + 5,
                y: Math.random() * this.H,
                r: p.r,
                d: p.d
              };
            }
          }
        }
      }
    }
  }
}
</script>

<style>
#main {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-repeat: no-repeat;
  position: absolute;
  background-size: 100% 100%;
}
</style>

我的解答思路和尝试过的方法

想在div中使用style="position: absolute; 和z-index体现层级，但只要无雪花和被雪花阻挡两种结果

我想要达到的结果

两个vue组件相容，既有雪花效果也能点击文章内容

Answer 1

主体部分再包一层div，然后position:relative:z-index:1