diff --git a/packages/plugins/@nocobase/plugin-public-forms/src/client/components/AdminPublicFormPage.tsx b/packages/plugins/@nocobase/plugin-public-forms/src/client/components/AdminPublicFormPage.tsx
index 28ab3c8f58..62e877e0eb 100644
--- a/packages/plugins/@nocobase/plugin-public-forms/src/client/components/AdminPublicFormPage.tsx
+++ b/packages/plugins/@nocobase/plugin-public-forms/src/client/components/AdminPublicFormPage.tsx
@@ -193,7 +193,14 @@ export function AdminPublicFormPage() {
           </Dropdown>
         </Space>
       </div>
-      <div style={{ maxWidth: 800, margin: '100px auto' }}>
+      <div
+        style={{
+          maxWidth: 800,
+          margin: '100px auto',
+          position: 'relative',
+          zIndex: 0 /** create a new z-index context */,
+        }}
+      >
         <VariablesProvider
           filterVariables={(v) => {
             return !['$user', '$nRole', '$nToken', '$nURLSearchParams'].includes(v.key);
diff --git a/packages/plugins/@nocobase/plugin-public-forms/src/client/components/PublicFormPage.tsx b/packages/plugins/@nocobase/plugin-public-forms/src/client/components/PublicFormPage.tsx
index ffdd46f6b1..bac0c865b0 100644
--- a/packages/plugins/@nocobase/plugin-public-forms/src/client/components/PublicFormPage.tsx
+++ b/packages/plugins/@nocobase/plugin-public-forms/src/client/components/PublicFormPage.tsx
@@ -243,7 +243,12 @@ function InternalPublicForm() {
           }}
         >
           <div
-            style={{ maxWidth: 800, margin: '0 auto' }}
+            style={{
+              maxWidth: 800,
+              margin: '0 auto',
+              position: 'relative',
+              zIndex: 0 /** create a new z-index context */,
+            }}
             className={css`
               @media (min-width: 1025px) {
                 padding-top: 10vh;