How to lay out a translucent block on an element on load?

Question

css

I am writing a decorator for react components that will display the loading bar. How to make the entire child block a bit grey. That is, to make the block appear inactive. With position: relative, z-index and a wrapper div, it doesn't work - you can see that the semi-transparent background is applied to the parent element, while the child elements remain above the background of the parent, and you want the child elements to be under this background.
How to fix?

Answer 1

More or less like this.