CSS 解决z

解决z-index上层元素遮挡下层元素点击事件问题

by:授客qq：1033553122

开发环境

win 10

element-ui “2.8.2”

vue 2.9.6

需求描述

如下，有以下界面，其中右侧边时一个elementui dialog模态对话框，希望在对话框上执行点击操作时，不会点击到被对话框遮挡的页面的按钮，同时，也希望可以点击对话框区域外的其它页面元素

html元素结构如下

解决方案

为被遮挡元素上层使用z-index属性的元素添加以下样式：

pointer-events: none;

这样点击事件就能穿透上层元素，可点击到被遮挡元素，但是此时，上层元十八大会议精神素无法响应点击事件

然后为被遮挡元素添加中班班级计划以下样式，让上层元素可以响应点击事件(仅让被遮挡元素自身可以响应点击事件)：

pointer-events: auto;

代码实现

<template>

<!–用例详情组件–>

<divclass=”ca-dialog-div”>

<el-dialog

ref=”cadialog”

:title=”cadialogtitle”

:visible=”cadialogvisible”

:fullscreen=”fullscreen”

:modal=”fal”

:clo-on-click-modal=”fal”

:before-clo=”beforeclo”

custom-class=”ca-dialog-class”

@clo=”秋天的作文开头;onclod关于农业生产ialog”

>

…略

</el-dialog>

</div>

</template>

<stylelang=”scss”>

//修改dialogbody样式//该样式不能放置.ca-dialog-div下，否则全屏功能不起作用

.ca-dialog-class{

position:fixed;

pointer-events:auto;//dialog本身区域不让“穿透点击”

display:block;

height:100%;

width:50%;//width:959px;

right:0px;北京遇上西雅图剧情介绍

margin-top:0px!important;

padding:10px!important;

overflow:auto;

}

.ca-dialog-div{

.el-dialog__wrapper{

pointer-events:none;//可点击dialog区域外的html元素

}

…略

}

</style>