diff --git a/packages/modal/src/modal.tsx b/packages/modal/src/modal.tsx
index 13e08a86d..36e85df5f 100644
--- a/packages/modal/src/modal.tsx
+++ b/packages/modal/src/modal.tsx
@@ -115,7 +115,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
   }, [title, type])
 
   return (
-    <TriggerProvider renderInBody={false}>
+    <TriggerProvider renderInBody={false} zIndex={10}>
       <AnimatePresence>
         {visible && (
           <>
diff --git a/packages/trigger/src/interface.tsx b/packages/trigger/src/interface.tsx
index 905cfedce..3294631a9 100644
--- a/packages/trigger/src/interface.tsx
+++ b/packages/trigger/src/interface.tsx
@@ -35,6 +35,7 @@ export type TriggerTrigger = "hover" | "click" | "focus" | "contextmenu"
 
 export interface TriggerContext {
   renderInBody?: boolean
+  zIndex?: number
   children?: ReactNode
 }
 
diff --git a/packages/trigger/src/trigger.tsx b/packages/trigger/src/trigger.tsx
index cad0a6d28..ba6cf66bf 100644
--- a/packages/trigger/src/trigger.tsx
+++ b/packages/trigger/src/trigger.tsx
@@ -72,6 +72,7 @@ export const Trigger: FC<TriggerProps> = (props) => {
     trigger = "hover",
     alignPoint,
     renderInBody,
+    zIndex,
   } = props
 
   const tipsContainerRef = useRef<HTMLDivElement>(null)
@@ -79,6 +80,7 @@ export const Trigger: FC<TriggerProps> = (props) => {
   const finalVisible = popupVisible === undefined ? visible : popupVisible
   const triggerContext = useContext(TriggerProviderContext)
   const _renderInBody = renderInBody ?? triggerContext.renderInBody ?? true
+  const _zIndex = zIndex ?? triggerContext.zIndex ?? 1
 
   useEffect(() => {
     if (defaultPopupVisible) {
@@ -359,7 +361,7 @@ export const Trigger: FC<TriggerProps> = (props) => {
                 css={[
                   css`
                     display: inline-flex;
-                    z-index: 1;
+                    z-index: ${_zIndex};
                   `,
                   applyBoxStyle(props),
                 ]}
diff --git a/packages/trigger/src/triggerContext.tsx b/packages/trigger/src/triggerContext.tsx
index 36d5976c8..c801b2bb0 100644
--- a/packages/trigger/src/triggerContext.tsx
+++ b/packages/trigger/src/triggerContext.tsx
@@ -1,15 +1,16 @@
 import { TriggerContext } from "./interface"
-import { createContext, FC, useEffect } from "react"
+import { createContext, FC } from "react"
 
 export const TriggerProviderContext = createContext<TriggerContext>({
   renderInBody: true,
+  zIndex: 1,
 } as TriggerContext)
 
 export const TriggerProvider: FC<TriggerContext> = (props) => {
-  const { renderInBody } = props
+  const { renderInBody, zIndex } = props
 
   return (
-    <TriggerProviderContext.Provider value={{ renderInBody }}>
+    <TriggerProviderContext.Provider value={{ renderInBody, zIndex }}>
       {props.children}
     </TriggerProviderContext.Provider>
   )