I have a custom dropdown list in the first el-collapse-item. When I expand the dropdown list, the list option is blocked by the second el-collapse-item.

<el-collapse v-if="currpage == 'edit'">

  <!-- 1st tab  -->
  <el-collapse-item class="collapseheader" title="Contact" name="1">
    <InputAutocomplete2
      :items="positionlist"
      :initval="cur_vendor.ContactPositionIDn2"
      :placeholder="$t('Position')"
      :key_field="'IDn'"
      :value_field="'PositionName'"
      @input="setinput_contactposition2" />
  </el-collapse-item>

  <!-- 2nd tab  -->
  <el-collapse-item class="collapseheader" title="Carrier" name="2">
    <!-- Some stuff here... -->
  </el-collapse-item>

</el-collapse>

<style>
.autocomplete2 {
    position: relative;
  }

  .autocomplete2-results {
    padding: 0;
    margin: 5px 0;
    border: 1px solid red;
    border-radius: 4px;
    height: 150px;
    overflow: auto;
    position: absolute;
    background-color: white;
    width: 100%;
    z-index: 999;
  }
  
  .autocomplete2-result {
    list-style: none;
    text-align: left;
    padding: 4px 2px;
    cursor: pointer;
  }

  .autocomplete2-result:hover {
    background-color: #4AAE9B;
    color: white;
  }
</style>

As shown in the picture above, the red border is my dropdown list options, and is being blocked by the 2nd tab. What I am trying to achieve is that the list would show on top of the 2nd tab.

I tried to play with CSS:property and CSS:z-index but no luck. I also came across this post on StackOverflow element UI el-collapse in front if others components but there are some slight differences in our problem, hence the solution did not work for me.

Any suggestions? Thank you!

Update 1: 16-03-2022

As suggested, I have created the same problem in https://codesandbox.io/s/vue-template-forked-5oy4lw