Currently, I am facing a challenge with positioning two images over each other. The back image should be at the bottom, while the center image needs to be on top of it. Additionally, there is a requirement for placing a random link (in this case google.com) on a specific blue box drawn on the center image.
To ensure that the random link remains in the exact position of the image, I plan to use absolute positioning. The reason behind keeping the center image separate from the back image is that I will later implement parallax scrolling, where the background scrolls slower than the foreground. Furthermore, I intend to add another layer even further back when implementing the parallax effect, but for now, I am concentrating on just two layers.
Below is the code snippet that I have:
<div style="position: relative; pointer-events: none">
<img src="/static/CenterImage.png" style="width: 100%; height: auto; z-index:5; position: absolute; pointer-events: none;">
<img src="/static/BackImage.png" style="width: 100%; height: auto; position:absolute; z-index:4; pointer-events: none; ">
<a href="www.google.com" title="gg" style="position: absolute; left: 39.75%; top: 15.93%; width: 25.75%; height: 8.64%; pointer-events: all; z-index: 6;"></a>
</div>
I am currently having difficulties clicking the bottom link. Interestingly, when I remove position:absolute from the top image, I can no longer see the back image, but I am able to click the link on the blue box flawlessly.
If anyone has tips or solutions on how to resolve this issue, please let me know :(