I have created four separate DIVs that divide the screen equally into quarters. Additionally, there is a full-screen DIV designated for canvas.
My goal is to ensure that these DIVs do not overlap each other - meaning if a user clicks on a link within one of the smaller DIVs, they should access that link. However, if the user interacts with the canvas element in the larger DIV, it should respond accordingly.
Below is the code snippet. Appreciate any assistance!
#graph-container {
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
position: fixed;
z-index: 9;
padding-left: 0px;
padding-right: 0px;
-webkit-animation: blink 2s linear 0s;
}
#NW { z-index: 10; position:fixed; width:50%; height:50%; top:0; left:0; }
#NE { z-index: 10; position:fixed; width:50%; height:50%; top:0; left:50%; }
#SW { z-index: 10; position:fixed; width:50%; height:50%; top:50%; left:0; }
#SE { z-index: 10; position:fixed; width:50%; height:50%; top:50%; left:50%; }