One great solution for your current issue could be utilizing the z-index property, which requires a different positioning than static but can effectively adjust the layering order of your elements. If you are experiencing problems such as unclickable items, it's possible that an invisible element is overlapping them - right-click and inspect element to identify if this is the case.
I have included a brief code snippet below to demonstrate how z-index functions. While increasing z-index values consecutively might not be ideal in practice, it serves its purpose for this example.
An essential tip to bear in mind is to opt for positive z-index values whenever feasible. Negative values may cause elements to sink beneath certain layers like the body or pseudo-elements, leading to confusion. Positive numbers generally make more sense to our human brains!
var divs = document.querySelectorAll('div');
var index = 4;
for(var i = 0; i < divs.length; i++) divs[i].addEventListener('click', function(){
this.style.zIndex = ++index;
});
div {
width: 200px;
height: 200px;
background: grey;
z-index: -1;
position: fixed;
left: 100px;
top: 100px;
}
div + div {
z-index: 0;
left: 120px;
top: 120px;
background: red;
}
div + div + div {
z-index: 1;
left: 140px;
top: 140px;
background: blue;
}
div + div + div + div {
z-index: 2;
left: 160px;
top: 160px;
background: yellow;
}
<div>-1</div>
<div>0</div>
<div>1</div>
<div>2</div>
For further information, refer to the documentation here: https://developer.mozilla.org/en/docs/Web/CSS/z-index
If you need clarification on any specific issues you're facing, please let me know as I want to ensure I address them accordingly.