Kyle White
Kyle White

Reputation: 89

Z-index of overlapping button is not working

I am trying to design the first Book Now button of this page (https://www.bridgecitychrysler.com/book-service/) to overlap onto the white section below the hero image. Even though I have set the z-index incredibly high, it is not showing up in front of the section below.

If someone is able to figure this out just in the inspect tool, that would be great!

Thanks,

Upvotes: 0

Views: 476

Answers (3)

Balendra kumar
Balendra kumar

Reputation: 1

Use pointer-events:none for these type of situation, when click events is not working for overlapped content, use pointer-events:none

Upvotes: 0

Johannes Buchner
Johannes Buchner

Reputation: 9

Try removing position:relative from your button class. This makes the button reappear, and then remove transform: translateX(-50%) from the a tag in the cta-container for proper alignment.

Upvotes: 0

Éanna G
Éanna G

Reputation: 78

Looks like your .hero-widget css has overflow: hidden; set, disabling that seems to have made it visible!

Upvotes: 1

Related Questions