diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index d8feebe55..9a1864d6b 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -2277,15 +2277,20 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
         );
       };
 
-      const drawableLayers = validLayers.filter((layer) => !isFullFrameLayer(layer.bounds));
-      const orderedLayers =
-        (drawableLayers.length > 0 ? drawableLayers : validLayers).sort(
-          (left, right) => (left.layerIndex || 0) - (right.layerIndex || 0)
-        );
+      const backgroundLayers = validLayers
+        .filter((layer) => isFullFrameLayer(layer.bounds))
+        .sort((left, right) => (left.layerIndex || 0) - (right.layerIndex || 0));
+      const subjectLayers = validLayers
+        .filter((layer) => !isFullFrameLayer(layer.bounds))
+        .sort((left, right) => (left.layerIndex || 0) - (right.layerIndex || 0));
+      const orderedLayers = [...backgroundLayers, ...subjectLayers];
+      const groupOffsetX = Math.max(28, Math.round(node.size.width * 0.08));
+      const groupOffsetY = Math.max(28, Math.round(node.size.height * 0.08));
 
       orderedLayers.forEach((layer, index) => {
         const layerTitle = `${displayTitle}-${layer.title || `图层${layer.layerIndex || index + 1}`}`;
         const bounds = layer.bounds;
+        const fullFrameLayer = isFullFrameLayer(bounds);
         const hasUsableBounds =
           bounds &&
           bounds.originalWidth > 0 &&
@@ -2294,16 +2299,16 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
           bounds.height > 0;
         const scaleX = hasUsableBounds ? node.size.width / bounds.originalWidth : 1;
         const scaleY = hasUsableBounds ? node.size.height / bounds.originalHeight : 1;
-        const targetPosition = hasUsableBounds
+        const targetPosition = hasUsableBounds && !fullFrameLayer
           ? {
-              x: node.position.x + bounds.x * scaleX,
-              y: node.position.y + bounds.y * scaleY,
+              x: node.position.x + groupOffsetX + bounds.x * scaleX,
+              y: node.position.y + groupOffsetY + bounds.y * scaleY,
             }
           : {
-              x: node.position.x,
-              y: node.position.y,
+              x: node.position.x + groupOffsetX,
+              y: node.position.y + groupOffsetY,
             };
-        const targetSize = hasUsableBounds
+        const targetSize = hasUsableBounds && !fullFrameLayer
           ? {
               width: Math.max(1, bounds.width * scaleX),
               height: Math.max(1, bounds.height * scaleY),
@@ -2326,6 +2331,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
               bounds: layer.bounds,
               allowOverlap: true,
               placementMode: "overlay",
+              layerSplitRole: fullFrameLayer ? "background" : "subject",
             },
           },
           connections: [node.id],