Member Avatar for simplypixie

Please look at my jsfiddle here - http://jsfiddle.net/ftuZ5/ . I know why the links won't work as the relative positioning I have used to create the link / menu backgrounds I want is covering the a element but I can't work out how to resolve the issue (having tried relative and z-index on the li and a elements, plus adding and extra div to span the a element using that to create the 'button' style background) but all to no avail.

Can anyone help?

  • 3 Contributors
  • 3 Replies
  • 227 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

Short summary and practical fixes for the problem reported by . 's idea to call event.preventDefault() only stops a link from navigating and does not solve an overlay that intercepts clicks. correctly pushed toward putting the visual background on the anchor; that is a simple, reliable approach. Below are why the overlays happen and a couple of robust fixes.

Why links get blocked: a positioned element (or its pseudo-element) placed above the anchor will intercept pointer events. Z-index only takes effect for positioned elements and inside the same stacking context; transforms, opacity, position+z-index on ancestors and certain CSS properties create new stacking contexts, so a higher z-index on the anchor may still sit underneath a sibling from a different stacking context.

Practical options:

  • Make the anchor the visual element: set the a to display:block, size it with padding, and add the background there. That keeps the clickable element and the visual element the same.
  • If a separate decorative element is required, render the decoration behind the link using a pseudo-element and keep pointer events off the decoration so clicks pass through.

Example pseudo-element approach:

nav li { position: relative; }

nav a {
  position: relative;
  display: block;
  z-index: 2;
  padding: 10px 15px;
}

nav a::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #eee;   /* decorative layer */
  z-index: 1;
  pointer-events: none; /* allow clicks on the anchor */
}

Troubleshooting notes: inspect parent elements for transforms, opacity, or z-index that create stacking contexts; ensure the anchor is positioned if its z-index is relied on; and if supporting very old browsers that lack pointer-events on HTML elements, prefer the background-on-anchor or the pseudo-element-with-negative-z-index approach.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

If you want the links not to work, using jQuery, when the click method is triggered, use the event.preventDefault(); method.

Member Avatar for rtrethewey

It seemed to work if you just remove the z-index on the <a>nchor tag. But, on the whole, I think you'd be better off assigning the background image to the <a>nchor tag instead of the <li>.

Member Avatar for simplypixie

JorgeM - the point is that I DO want the links to work and they don't but I have sorted the problem now anyway

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.