el evento flotante causa un problema de parpadeo

Hoy, los bloggers encontraron un dolor de cabeza especial al hacer el front-end: cuando
obtuvieron un proyecto ya realizado para modificar el estilo, descubrieron que el estilo de ivew estaba anidado en el estilo, lo que causó dos problemas en el evento de desplazamiento.

<div class="bottom-panel" v-if="showActiveLayerList">
                <div class="title">
                    {{la.name}}
                    <div class="close-panel">
                        <i class="iconfont icon-baseline-close-px"></i>
                    </div>
                    <div class="query-panel ">
                        <Input suffix="ios-search" v-model="xmmc" placeholder="名称" style="width: 180px;z-index:99999" @on-enter="query"/>

                    </div>
                </div>
                <Row class="header-row">
                    <Col span="8">
                        <div class="item item-header">名称</div>
                    </Col>
                    <Col span="3">
                        <div class="item item-header">名称2</div>
                    </Col>
                    <Col span="2">
                        <div class="item item-header">年度</div>
                    </Col>
                    <Col span="3">
                        <div class="item item-header">所在</div>
                    </Col>
                    <Col span="3">
                        <div class="item item-header">文号</div>
                    </Col>
                    <Col span="3">
                        <div class="item item-header">面积</div>
                    </Col>
                    <Col span="2">
                        <div class="item item-header">进度</div>
                    </Col>
                </Row>
                 <VuePerfectScrollbar v-bind:style="{width:contentWidth-330-180+'px','height':132+'px'}" ref="town-land-ps" :settings="settings" >
                        
                        <Row v-for="(item,index) in queryList" :key="index">
                            <Col span="8">
                                <div class="item">{{item.attributes.xx}}</div>
                            </Col>
                            <Col span="3">
                                <div class="item">{{item.attributes.mm}}</div>
                            </Col>
                            <Col span="2">
                                <div class="item">{{item.attributes.nn}}</div>
                            </Col>
                            <Col span="3">
                                <div class="item">{{item.attributes.zz}}</div>
                            </Col>
                            <Col span="3">
                                <div class="item">{{item.attributes.yy}}</div>
                            </Col>
                            <Col span="3">
                                <div class="item">{{item.attributes.ss}}亩</div>
                            </Col>
                            <Col span="2">
                                <div class="item">{{item.attributes.dd}}</div>
                            </Col>
                        </Row>
                    </VuePerfectScrollbar>
            </div>
        </div>

Este es el estilo de iview-ivu-row que está anidado: puedes probarlo. Este es el estilo de la fila y la columna escrita por el autor de iview. El estilo original es asi

 .title{
                float: left;
                width:100%;
                height:40px;
                padding-left:10px;
                font-size: 14px;
                font-weight: 700;
                color:#000;
                line-height: 40px;
                padding-right: 10px;
                }

.ivu-row:hover{
                background: #eaeff2;
            }

Encontrará que el texto y ti en el título han desaparecido, y creo que la mayoría de la gente piensa en dos soluciones al principio:
1. Establezca el índice z = 9999 para estos dos cuadros por separado
2. Establezca el estilo de la suspensión Un índice z = -1.
Por supuesto, el primer método sigue siendo el mismo que el original. El primer
método seguirá desapareciendo. El segundo método puede lograr el efecto, pero todos encontrarán un error que se produce al pasar el mouse. Encontró el problema del parpadeo. Esto se debe a que una vez que configura el mouse para que se desplace, se activó el desplazamiento múltiple, por lo que causó el problema de parpadeo.

Solución:
Por supuesto, el primer método es resolverlo. Debe establecerse en el índice z, pero puede encontrar que el índice z debe usarse junto con el posicionamiento
. ¡Agregue un posicionamiento relativo dentro del contenedor! ¡
En este punto, el problema está resuelto!