How does Vuejs top the pop-up panel of datepicker?

I write a front-end page using the iview component. When I nesting a datepicker with a card, the pop-up panel of the datepicker is covered and cannot be topped.
part of my code:

<card class="card">
 <p slot="title">
  <Col>
    <Col span="3" class="offlineOrderSplitter">
      <div class="offlineOrderSplitterDiv">
        
      </div>
      <div class="offlineOrderSplitterDiv">
        
      </div>
    </Col>
    <Col span="20">
      <div>
        <span style="padding-left:10px"></span>
        <div style="float:right">
          <span></span>
          <span></span>
          <span></span>
          <span>
            <DatePicker type="daterange" placement="bottom-end" placeholder="" style="width: 200px"></DatePicker>
          </span>
        </div>
      </div>
    </Col>
  </Col>
</card>

screenshot below. Everything is fine when the pop-up window pops up, but it makes an error when it pops up. It is covered by

by card.

I have used the css setting of z-index, but it still doesn"t work. Thank you first.