I understand in general we place individual elements one on top of the other with different positions, many times to give an illusion of two or more elements that are separated to look like a single component. But, is there a property in CSS that could make a higher position element prevent all the other elements behind it to display the overlap and just between a specific depth range?

Just to give more context here, I’m making a dynamic pie, each element is independent, including the center. The page has a lot of dynamism, water effects on the background, fog at the top, background picture, etc. Everything has different depths, but among all of them, I want to remain the center of the pie “untouched” by everything displayed at the back of it, while keeping a transparent background. One thing I’ve been struggling with a lot is removing the background color when hovering over a pie-children.

As you can see in the attached picture, the center of the pie and all individual children have a transparent background. The center of the pie has a higher z-index than the children, hence when a child is hovered its background overlaps with the center of the pie. I have applied a transparent background gradient to the pie children to remove the overlap, but because it’s a dynamic pie it only works for a 4 element pie. When the pie has less or more than 4 elements, the angle of the background gradient becomes disproportional.

Please consider the background gradient is just one example, I also want to display a box-shadow in each child. The box-shadow, as well as the background color, need to be removed from the center of the pie, but the water effect happening on top of the background picture needs to continue running.

Fiddle -> https://jsfiddle.net/jsandler/u34r8x9d/25/

Pie children CSS

.pie-children:hover {
    /* box-shadow: 0px 0px 30px 10px rgba(255, 255, 255, 0.2) inset, 0px 0px 30px 10px rgba(255, 255, 255, 0.2); */
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(5px);
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
    /* background-image: radial-gradient(farthest-corner at 0% 100%, transparent 0 25%, rgba(255, 255, 255, .15) 25% 100%); */
    cursor: pointer;
}