diff options
3 files changed, 23 insertions, 1 deletions
diff --git a/.changeset/spicy-starfishes-shake.md b/.changeset/spicy-starfishes-shake.md new file mode 100644 index 000000000..a283f4d37 --- /dev/null +++ b/.changeset/spicy-starfishes-shake.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Ensure overlay x-ray z-index is higher than the island diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts index 3af467ecd..31c70b724 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts @@ -15,6 +15,19 @@ export function createHighlight(rect: DOMRect, icon?: Icon) { return highlight; } +export function getHighlightZIndex(el: Element) { + let highestZIndex = 0; + let current: Element | ParentNode | null = el; + while(current instanceof Element) { + let zIndex = Number(getComputedStyle(current).zIndex); + if(!Number.isNaN(zIndex) && zIndex > highestZIndex) { + highestZIndex = zIndex; + } + current = current.parentNode; + } + return highestZIndex + 1; +} + export function positionHighlight(highlight: DevOverlayHighlight, rect: DOMRect) { highlight.style.display = 'block'; // Make an highlight that is 10px bigger than the element on all sides diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts index ab927bacc..aff02fc9c 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts @@ -1,6 +1,6 @@ import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js'; import type { DevOverlayHighlight } from '../ui-library/highlight.js'; -import { attachTooltipToHighlight, createHighlight, positionHighlight } from './utils/highlight.js'; +import { attachTooltipToHighlight, createHighlight, getHighlightZIndex, positionHighlight } from './utils/highlight.js'; const icon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z"/></svg>'; @@ -41,6 +41,10 @@ export default { const tooltip = buildIslandTooltip(island); attachTooltipToHighlight(highlight, tooltip, islandElement); + // Set the z-index to be 1 higher than the greatest z-index in the stack. + const zIndex = getHighlightZIndex(islandElement); + tooltip.style.zIndex = highlight.style.zIndex = zIndex+''; + canvas.append(highlight); islandsOverlays.push({ highlightElement: highlight, island: islandElement }); }); |