diff --git a/packages/layout-engine/painters/dom/src/renderer.ts b/packages/layout-engine/painters/dom/src/renderer.ts index 42774924a6..32bde42e59 100644 --- a/packages/layout-engine/painters/dom/src/renderer.ts +++ b/packages/layout-engine/painters/dom/src/renderer.ts @@ -3951,7 +3951,8 @@ export class DomPainter { img.style.marginRight = `${run.distRight}px`; } - // Apply z-index to render above tab leaders + // Position and z-index on the image only (not the line) so resize overlay can stack above. + img.style.position = 'relative'; img.style.zIndex = '1'; // Assert PM positions are present for cursor fallback @@ -4282,6 +4283,9 @@ export class DomPainter { throw new Error('DomPainter: document is not available'); } + const lineRange = computeLinePmRange(block, line); + let runsForLine = sliceRunsForLine(block, line); + const el = this.doc.createElement('div'); el.classList.add(CLASS_NAMES.line); applyStyles(el, lineStyles(line.lineHeight)); @@ -4301,16 +4305,12 @@ export class DomPainter { el.style.textAlign = 'left'; } - const lineRange = computeLinePmRange(block, line); - if (lineRange.pmStart != null) { el.dataset.pmStart = String(lineRange.pmStart); } if (lineRange.pmEnd != null) { el.dataset.pmEnd = String(lineRange.pmEnd); } - - let runsForLine = sliceRunsForLine(block, line); const trackedConfig = this.resolveTrackedChangesConfig(block); // Preserve PM positions for DOM caret mapping on empty lines. diff --git a/packages/layout-engine/painters/dom/src/styles.ts b/packages/layout-engine/painters/dom/src/styles.ts index b61016001a..e04a6d079a 100644 --- a/packages/layout-engine/painters/dom/src/styles.ts +++ b/packages/layout-engine/painters/dom/src/styles.ts @@ -77,13 +77,10 @@ export const fragmentStyles: Partial = { }; /** - * Z-index for paragraph text lines, ensuring they render above floating - * OOXML-derived fragments (which typically range 1–10 000). Must stay - * below browser-UI layers (tooltips, menus, overlays) that may live in the - * same stacking context. + * Line container styles. z-index is intentionally not set on the line so that + * the resize overlay (and other UI) can stack above content. Only the image + * element itself gets z-index for layering within the line (e.g. above tab leaders). */ -const TEXT_LINE_Z_INDEX = '100000'; - export const lineStyles = (lineHeight: number): Partial => ({ lineHeight: `${lineHeight}px`, height: `${lineHeight}px`, @@ -95,7 +92,6 @@ export const lineStyles = (lineHeight: number): Partial => // provides defense-in-depth against any remaining sub-pixel rendering // differences between measurement and display. overflow: 'visible', - zIndex: TEXT_LINE_Z_INDEX, }); const PRINT_STYLES = `