Member Avatar for FriXionX

I have a problem with an image I want to be clickable.

I have writing to the far left of this - with a bottom border (width 800px) so it has a line throughout most of the website. I also want this clickable button to be above the border on the far right, but when it's above the border, it wont let me click it.

The first image is it being fully unclickable, the 2nd image you can click the bottom bit because its below the border.

Is there any way to fix this?
The code snippets are below with the positioning.
The first id is the button I want, the second is the text with the border.

#scrolltonew {
	position:absolute;
	top: 133px;
	left: 943px;
	}

	#bestsellers {
	position:absolute;
	font-family:verdana, sans-serif;
	margin:2px;
	left:284px;
	top:115px;
	color:orange;
	font-size:20px;
	border-bottom: 1px solid #DDDDDD;
	padding-bottom: 3px;
	width:800px;
	}

EDIT
EDIT
EDIT:
jesus, nevermind. fixed it, just needed to create the text+border before the button. sigh.
not sure how to delete threads, so umm.. solved..?

clickable.png 5.6 KB unclickable.png 26.91 KB
Edited by FriXionX because: n/a
  • 2 Contributors
  • 1 Reply
  • 219 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by seonetsmartz

Dani AI

Generated

This is a classic stacking/painting-order problem: when two positioned elements overlap the one later in the DOM (or the one with a higher z-index) receives pointer events. The quick fix you found by creating the text+border before the button changed the painting order so the button landed on top. That works, but it's fragile—reordering markup to control layering can make maintenance harder.

Safer options:

  • Give the clickable element an explicit stacking level (z-index). z-index only affects positioned elements (position != static).

    /* ensure the button sits above siblings */
#scrolltonew {
z-index: 1000;
}

  • If the bordered element is purely decorative and should never catch clicks, let clicks pass through it with pointer-events.

    /* decorative overlay should not block clicks */
.bestsellers {
pointer-events: none;
}

  • Or reduce the overlaying element's box (width/height) or use a background/gradient or pseudo-element for the horizontal line so it doesn't physically cover the button.

Debugging tips: open DevTools, inspect the two elements, toggle background/outlines to see which box is covering the click area, and experiment with z-index and pointer-events live. ’s DOM-reorder trick and ’s confirmation show the underlying cause; for long-term stability prefer an explicit z-index or layout change rather than relying on source order. Note: pointer-events is fine in modern browsers but test if you must support very old IE versions.

Member Avatar for seonetsmartz

i am heaving same problem and i use your post . It works great to me. Thanks for this post.

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.