优化移动端UI布局和逻辑

assets/style.css

@@ -168,7 +168,7 @@ body.loaded .layout {
     width: 100%;
     padding: 0 1rem;
     justify-content: space-between;
-    z-index: 1000; /* 确保在最上层 */
+    z-index: 900; /* 修改z-index，确保按钮层级高于基础内容但低于弹出面板 */
     pointer-events: none; /* 防止按钮区域阻挡其他内容 */
 }
 
@@ -212,7 +212,7 @@ body.loaded .layout {
     opacity: 0;
     visibility: hidden;
     transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 90;
+    z-index: 950; /* 调整遮罩层z-index，处于按钮与弹出面板之间 */
     backdrop-filter: blur(4px);
 }
 
@@ -1127,6 +1127,7 @@ body .content.expanded {
     .sidebar.active {
         transform: translateX(0);
         box-shadow: 2px 0 10px var(--shadow-color);
+        z-index: 1000; /* 增加侧边栏激活时的z-index，确保显示在按钮之上 */
     }
     
     /* 重置移动端下的侧边栏展开状态 */
@@ -1167,6 +1168,7 @@ body .content.expanded {
     
     .search-container.active {
         transform: translateY(0);
+        z-index: 1000; /* 增加搜索容器激活时的z-index，确保显示在按钮之上 */
     }
     
     .search-box {