diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx
index 5aa747d47..e417aa2e8 100644
--- a/components/image-annotator.tsx
+++ b/components/image-annotator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useRef, useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand } from "lucide-react";
 import { Button } from "./ui/button";
 import { toast } from "sonner";
@@ -64,6 +65,12 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
   const [processedImageUrl, setProcessedImageUrl] = useState<string | null>(null);
   const [processedImageBase64, setProcessedImageBase64] = useState<string | null>(null);
   const [processType, setProcessType] = useState<"rmbg" | "enhance" | "extend" | null>(null);
+  const [mounted, setMounted] = useState(false);
+
+  // 确保在客户端渲染
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   // 加载图片
   useEffect(() => {
@@ -563,7 +570,8 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
     onConfirm(dataUrl);
   };
 
-  return (
+  // 弹窗内容
+  const modalContent = (
     <div 
       className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 backdrop-blur-md p-4"
       onClick={onCancel}
@@ -810,4 +818,11 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
       )}
     </div>
   );
+
+  // 使用 Portal 渲染到 document.body，避免受父元素定位影响
+  if (!mounted) {
+    return null;
+  }
+
+  return createPortal(modalContent, document.body);
 }