# 手机端菜单被第三方插件遮挡处理

在移动设备端访问网站时，如果手机端菜单被第三方插件元素（例如在线聊天、加入会员俱乐部按钮等）遮挡，可能导致菜单中的左下角社媒信息及其他帮助内容无法正常显示。这种情况会影响用户体验，因此需要进行必要的调整。

<figure><img src="/files/M9fXDMhG3nZe9k1CNAwD" alt="" width="375"><figcaption></figcaption></figure>

### **问题描述**

* 手机端菜单被打开时，左下角的社媒信息及帮助内容被第三方插件元素遮挡。
* 导致用户无法正常访问菜单中的重要信息。

### **解决方案**

通过提升手机端菜单的层级（z-index），确保菜单内容不会被第三方插件元素遮挡。

### **操作步骤**

1. 进入网站后台管理系统。
2. 找到模板设置中的**自定义CSS**区域。
3. 在自定义CSS中添加以下代码：

```
.section-header {
  z-index: 9999999;
}

.modal,
.product-media-modal {
  z-index: 9999999;
}
```

<figure><img src="/files/pEVsB3EBXbjqKr7TJR9l" alt=""><figcaption></figcaption></figure>

### **代码说明**

* `.section-header { z-index: 9999999; }`: 提升菜单所在的容器层级，确保其显示在最前面。
* `.modal, .product-media-modal { z-index: 9999999; }`: 解决弹窗等可能被遮挡的情况。

### **注意事项**

* 确保不会对其他重要页面元素的层级产生冲突。
* 建议在添加样式后多次测试，确保菜单和其他页面元素功能正常。
* 如果网站中仍有遮挡情况，可以适当调整 `z-index` 值。

### **验证效果**

1. 打开手机端网站。
2. 点击菜单按钮，确认菜单中所有内容正常显示。
3. 检查是否仍有遮挡情况，若无异常即为设置成功。

### **总结**

通过上述简单的CSS层级调整，能够有效避免手机端菜单被第三方插件元素遮挡的问题，从而提升用户访问体验。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ascent.webvista.studio/webvista-studio-docs/ye-mei/shou-ji-duan-cai-dan-bei-di-san-fang-cha-jian-zhe-dang-chu-li.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.