diff --git a/src/block-components/image/editor.scss b/src/block-components/image/editor.scss
index e0992197c6..a076e7b5ac 100644
--- a/src/block-components/image/editor.scss
+++ b/src/block-components/image/editor.scss
@@ -85,11 +85,22 @@
 }
 
 // Hide the size tooltip when the image resizer is too narrow.
-.stk-img-resizer {
+.stk-img-resizer-tooltip-container {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+
+	// Keep the tooltip above the click-to-edit overlay at z-index 2.
+	z-index: 3;
+	container-name: stk-img-resizer-tooltip;
 	container-type: inline-size;
+
+	.stk-resizer-tooltip {
+		pointer-events: auto;
+	}
 }
 
-@container (max-width: 139px) {
+@container stk-img-resizer-tooltip (max-width: 139px) {
 	.stk-resizer-tooltip {
 		display: none !important;
 	}
diff --git a/src/block-components/image/image.js b/src/block-components/image/image.js
index 6d506f142a..233c713ca2 100644
--- a/src/block-components/image/image.js
+++ b/src/block-components/image/image.js
@@ -218,39 +218,41 @@ const Image = memo( props => {
 				</button>
 			) }
 			{ props.hasTooltip && props.showTooltips && (
-				<ResizerTooltip
-					enableHeight={ props.enableHeight || props.enableDiagonal }
-					enableWidth={ props.enableWidth || props.enableDiagonal }
-					height={ formSize( currentHeight || props.height, props.heightUnit, false, false ) }
-					width={ formSize( currentWidth || props.width, props.widthUnit, false, false ) }
-					widthUnits={ props.widthUnits }
-					heightUnits={ props.heightUnits }
-					heightUnit={ props.heightUnit }
-					widthUnit={ props.widthUnit }
-					allowReset={ props.allowReset }
-					defaultWidth={ props.defaultWidth }
-					defaultHeight={ props.defaultHeight }
-					onChangeHeight={ ( { value, unit } ) => {
-						const size = {}
-						if ( typeof value !== 'undefined' ) {
-							size.height = value
-						}
-						if ( typeof unit !== 'undefined' ) {
-							size.heightUnit = unit
-						}
-						props.onChangeSize( size )
-					} }
-					onChangeWidth={ ( { value, unit } ) => {
-						const size = {}
-						if ( typeof value !== 'undefined' ) {
-							size.width = value
-						}
-						if ( typeof unit !== 'undefined' ) {
-							size.widthUnit = unit
-						}
-						props.onChangeSize( size )
-					} }
-				/>
+				<div className="stk-img-resizer-tooltip-container">
+					<ResizerTooltip
+						enableHeight={ props.enableHeight || props.enableDiagonal }
+						enableWidth={ props.enableWidth || props.enableDiagonal }
+						height={ formSize( currentHeight || props.height, props.heightUnit, false, false ) }
+						width={ formSize( currentWidth || props.width, props.widthUnit, false, false ) }
+						widthUnits={ props.widthUnits }
+						heightUnits={ props.heightUnits }
+						heightUnit={ props.heightUnit }
+						widthUnit={ props.widthUnit }
+						allowReset={ props.allowReset }
+						defaultWidth={ props.defaultWidth }
+						defaultHeight={ props.defaultHeight }
+						onChangeHeight={ ( { value, unit } ) => {
+							const size = {}
+							if ( typeof value !== 'undefined' ) {
+								size.height = value
+							}
+							if ( typeof unit !== 'undefined' ) {
+								size.heightUnit = unit
+							}
+							props.onChangeSize( size )
+						} }
+						onChangeWidth={ ( { value, unit } ) => {
+							const size = {}
+							if ( typeof value !== 'undefined' ) {
+								size.width = value
+							}
+							if ( typeof unit !== 'undefined' ) {
+								size.widthUnit = unit
+							}
+							props.onChangeSize( size )
+						} }
+					/>
+				</div>
 			) }
 			<div className="stk-img-resizer-wrapper" ref={ wrapperRef }>
 				<img
diff --git a/src/components/resizer-tooltip/index.js b/src/components/resizer-tooltip/index.js
index 1e8abeceac..d03bb82ead 100644
--- a/src/components/resizer-tooltip/index.js
+++ b/src/components/resizer-tooltip/index.js
@@ -109,7 +109,7 @@ const ResizerTooltip = props => {
 				setPrevSwitchedWidth( props.width )
 				// At first switch, remember the width
 				// Calculate new width based on the current one
-				const imgEl = tooltipRef.current?.parentElement.querySelector( '.stk-img' )
+				const imgEl = tooltipRef.current?.closest( '.stk-img-resizer' )?.querySelector( '.stk-img' )
 				const newSize = convertSizeByUnit( props.width, unit, 'width', imgEl )
 				setCurrentWidth( newSize )
 				width = clampSize( newSize, unit )
@@ -162,7 +162,7 @@ const ResizerTooltip = props => {
 				setPrevSwitchedHeight( props.height )
 				// At first switch, remember the height
 				// Calculate new height based on the current one
-				const imgEl = tooltipRef.current?.parentElement.querySelector( '.stk-img' )
+				const imgEl = tooltipRef.current?.closest( '.stk-img-resizer' )?.querySelector( '.stk-img' )
 				const newSize = convertSizeByUnit( props.height, unit, 'height', imgEl )
 				setCurrentHeight( newSize )
 				height = clampSize( newSize, unit )