按钮不触发也许是层级关系

今天在写项目的时候发现了一个问题

发现怎么点击都不触发 各种方法试了一下 是原先的包裹的大盒子把按钮盖住 以至于没有点击没有效果 

html部分

<div id="co-box">

    <div class="con-tain">

      <div class="w-box">

        <div class="word-shcool" id="school">

            <p class="text-word3">学校代码{{shcoolcode}}</p>

            <p class="text-word-3">学校名称{{schoolname}}</p>

            <a href="#"><button class="poss" id="poss" οnclick="poss()">提交申报</button></a>

        </div>

css修改部分

  #co-box{

    z-index: 1;

    margin-top: -200px;

  }

  .con-tain{z-index: -2;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 90vh;

  }

  .w-box {z-index: 2;

    box-shadow: 1px 1px 1px 1px rgb(125, 123, 123);

    width: 1300px;

    height: 450px;

    background-color: rgb(255, 255, 255);

  }

 

  #word-box{

    z-index: 3;

    margin-top: -120px;

  }

  .con-tain1{

    display: flex;

    justify-content: center;

    align-items: center;

    height: 50px;

  }

  .con-tain1 p{

   color: blue;

  }

  .zi table{

    margin-top: 5px;

    border-collapse: collapse;

  }

  .zi td

   {

   color: rgb(164, 164, 164);

    border: 1px solid rgb(164, 164, 164);

    padding: 8px;

  }

  .word-shcool {

    width: 100%;

    display: flex;

    white-space: nowrap;  /* 让元素不换行 */

    margin-right: 5px;

    margin-left: 50px;

    margin-top: 10px;

  }

  .text-word3,

  .text-word-3 {

    display: inline-block;  /* 让元素水平排列 */

    margin-right: 10px;

    font-size: 15px;

  }

  .word-shcool button {

    position: relative;

    z-index: 999;

    background-color: rgb(82, 168, 138);

    width: 200px;

    height: 50px;

    border: none;

    color: white;

   margin-left: 320px;