在特定的div上显示叠加层，而不是在整个视口上显示

Question

我正在使用angular 5应用程序。我是，试图在每个组件上显示一个覆盖图（不在整个页面上），并带有一些加载图像。

当前我正在使用以下CSS：

 .overlay{
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity:0.5;
    }

    <div class="overlay"> </div>



   

当前，在整个视口上创建了叠加层。 我们如何在特定组件或div上创建叠加层？