place a grid on a webpage in javascript

Question

I am a beginner in Javascript and I wonder if you can help me with this issue:

I am working on a webpage developed another programmer. the page has a lot of functionalities (buttons..etc) I am trying to add a grid on top of all the page so that the buttons will still be clicable. I made a png grid and put at the beginning of the body in the html file. The problem is that I cannot clic the button anymore under the image, even if the image is transparent. I also tried with table grid but same issue. I saw that I might need to check the z-index, but before going this way I wonder if there is an alternative way. If z-index is the only way, will I have to check all the other buttons (there are a lot) and set a z-index to them as well?

best regards Guido

Answer 1

I could be completely misunderstanding your issue because you haven't provided much useful information, but it sounds like you want a grid for visual purposes only?

If that's the case, you could try wrapping the contents that you want on top of the grid in a single div , and setting the background as the grid png you mentioned.

<div class="bg">
<button></button>
<button></button>
</div>

.bg {
background-image: url("grid.png");
}