You are changing the z-index of the "focused" element but you need to check if one of the parents have z-index defined already because in that case the effect d

You are changing the z-index of the "focused" element but you need to check if one of the parents have z-index defined already because in that case the effect doesn't work. Instead of looking for a workaround I would suggest that since you are already aiming for modern browsers maybe you should use SVG (clip-path) with CSS {pointer-events: none} so you have a real "hole" and you could use 4 dummy divs if you want to disable interaction with non-focused elements.