divs i .css,Slicing divs in CSS

This seems to be the perfect use case for z-index, a property that requires positioning other than static but otherwise works as expected, changing the layer order of your items. I am not sure what the issue is you are encountering (something not clickable is always possible if another invisible element is overlaying it - the best way to find out is to right click and inspect element to see if the right element get selected).

I have added a little snippet that shows you how z-index is supposed and can work. I keep increasing the z-index, which is obviously a bad idea and it would be better to sort them, but for the purpose of this example it does fine.

The best tip I can give, however, is to try to use as many positive z-indexes as possible. Negative z-index can sink under things such as your body and its pseudo elements, making it hard to figure out what is going on. I also believe that when we are talking in positive numbers it makes a lot more sense to our puny 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;

}

-1

0

1

2

Let me know if this helps, as I am, obviously, unclear what precise issues you are seeing.