Member Avatar for aslittell

Is it possible to set a table behind an image?

I am trying to do a mouseover feature on an image, however it isn't working because the table is on top of the image.

  • 3 Contributors
  • 2 Replies
  • 93 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by sourcebits

Dani AI

Generated

A quick, practical follow-up that builds on and : the symptom (table sitting over an image and blocking mouseover) is usually about stacking contexts and event capture, not just element order. Ancestor elements can establish their own stacking context (via transforms, opacity, filters, isolation, layout modes, etc.), which prevents simple layering changes from having effect.

Checklist and safe fixes:

  • Inspect the computed styles and ancestor chain with browser devtools to find any property creating a new stacking context. If an ancestor is the culprit, either move the image into that same context or remove/adjust the property.
  • Avoid overlapping interactive elements when possible. Making the visual asset a CSS background or placing it on a pseudo-element keeps the DOM free for events.
  • Let pointer events pass through a visual overlay when the overlay does not need to be interactive. Example:
/* overlay element visually above but not interactive */
.overlay {
  pointer-events: none;
}

Cautions: pointer-events: none disables all mouse interaction for that element (links, hover, accessibility). If interactivity is needed on both elements, handle hover on a shared parent or use event delegation in script. For full details on stacking rules and the pointer-events property, see the MDN references on the stacking context and pointer events: The stacking context and pointer-events.

Recommended Answers

All 2 Replies

Member Avatar for MJ Pieterse

you have to set your z-index on the table and the picture. to set a z-index you also need to include a position on your main style. Make sure that your z-index for your picture is higher than that of the table and if you don't know what position to use, just use inherit for your style sheet and it function correctly.

Member Avatar for sourcebits

Move the image using z-index and positioning absolute on top of the table.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.