css_浮层禁止击穿（防止可点击浮层下面的元素）

html-css0148

css_浮层禁止击穿（防止可点击浮层下面的元素）,第1张

通过div实现了一个浮层，但是发现浮层底下的部分元素是可以透过浮层的

将最上层的DIV的z-index属性设置的大一点，比如z-index:2000；

注意：

1、所有的相关元素都得用DIV并且必须有等位属性：position:relative或者：position:absolute ；

2、将最上层的DIV的z-index属性设置的大一点，比如z-index:2000；

3、其他在下面层的DIV中z-index的属性值都要小于最上层DIV的z-index值；

前两天在项目中遇到一个问题，需要手动去修改引入的第三方组件的CSS样式，我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式，结果当然是行不通的（不然我现在也不会在这里写这篇）。 于是我查了一下，是因为我在vue组件里面将设置成了局部样式，局部样式只在当前组件生效，对引入的其他组件是无法起作用的。然后我试了一下，把 scoped 去掉就行了。 或者在组件里面写多一份全局样式 但是如果不在style里面写 scoped ，直接写成全局样式，最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢，我想到以前涉及过的一个名词 样式穿透 ，立刻实践了一下，果然就成了。样式穿透 需要定义一个外层的style，通过 >>>可以使得socped属性下的的样式穿透到全局， 外层 >>>第三方组件 或者 外层 /deep/ 第三方组件 。 >>>是 /deep/ 的别名，但是在sass之类的样式预处理器之中无法正确解析。