如何设置插件的 z 索引

Question

我有一个页面，其中插件似乎覆盖了移动设备中下拉菜单元素的 z 索引。下拉列表设置为z-index: 100;并且适用于所有其他页面，但在我有一个插件的一页上，该插件在删除时显示在菜单上。插件 z 索引设置为 100，或者覆盖下拉菜单的 z 索引。

所以我找到了插件 ID 并针对它，不起作用。

#wpcf7-f337-p187-o1 {z-index: 98;}

首先我针对容器元素，不起作用，然后是容器元素，然后是类，不起作用，然后是这样的特异性：

.entry-content>.wpcf7{z-index: 98;}

没用

所以我将该页面中的正文设置为 z-index 98，不起作用。

body.page-id-187{z-index: 98;}

没用。

.dropdown-menu和容器.collapse都设置为 z 索引 100，背景颜色：白色，如下所示：

@media(max-width: 768px){ul.dropdown-menu li a{position: relative; left: 55px; text-align: unset; font-size: 38px !important; background-color: white; color: black !important; line-height: 30px !important; padding: 0px !important; width: unset !important; margin-left: unset !important;z-index: 100;}}

所以：

@media(max-width: 768px){.collapse {position: absolute; height: 775px; background-color:white; z-index: 100; top:75px; left: -50px; line-height: 10px;}} 

目录

<div class="entry-
content"><div role="form" 
class=
"wpcf7" id="wpcf7-f337- 
p187-o1" lang="en-US" 
dir="ltr">
<div class="screen-reader- 
response"></div>
<form 
action="/contact/#wpcf7- 
f337-p187-o1" method="post" 
class="wpcf7-form" 
novalidate="novalidate">
<div style="display: 
none;">
<input type="hidden" 
name="_wpcf7" value="337" 
/>
<input type="hidden" 
name="_wpcf7_version" 
value="5.1.3" />
<input type="hidden"  
name="_wpcf7_locale" 
value="en_US" />
<input type="hidden" 
name="_wpcf7_unit_tag" 
value="wpcf7-f337-p187-o1" 
/>
<input type="hidden" 
name="_wpcf7_container
_post" value="187" />
</div>
<p><label>NAME<br />
<span class="wpcf7-form- 
control-wrap your-name">. 
<input type="text" 
name="your-name" value="" 
size="40" class="wpcf7- 
form-control wpcf7-text 
wpcf7-validates-as- 
required" aria- 
required="true" aria- 
invalid="false" /></span> 
</label></p>
<p><label>EMAIL<br />

手机页面在这里

Answer 1

具有较高 z 索引的元素将显示在上方。为了确保你的元素在顶部，你可以设置一个巨大的z-index值，它肯定高于插件元素之一：

z-index: 999999 !important;

https://www.w3schools.com/cssref/pr_pos_z-index.asp

"堆栈顺序较大的元素总是在堆栈顺序较低的元素前面。">