Angular 面包屑在子组件内容上重叠

我在父组件中有面包屑和子组件。面包屑在初始页面加载中不可见。将显示子组件内容。单击子组件时，面包屑可见，但位于子组件内容的顶部。我的要求是，当引导是可见的，子组件应该是可见的，并且不应该有任何重叠

<div class="container">
    <div class="row" *ngIf="breadCrumbs?.length>0">
        <div class="col">
            <nav aria-label='breadcrumb' class="breadcrumb-fixed">
                <ol class='breadcrumb'>
                    <li *ngFor='let breadcrumb of breadCrumbs'>
                        <a (click)="handleBreadCrumb()">{{ breadcrumb.label}}</a>

                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="row">
        <div class="col">
            //child components goes here.
        </div>
    </div>
</div>

---

一次小规模的闪电重演会更有帮助。谢谢。无法使用临时便笺簿站点。如果链接中断最终导致应答中断，并且对社区不有用。显示面包卷时，将边距设置为de div，其中是子组件

[style.margin]=“showBreadcrum？”2rem:“空”

一个最小的stackblitz复制将更有帮助。谢谢。无法使用临时便笺簿站点。如果链接断开，则最终答案断开，对社区不有用。显示面包屑时，将边距设置为de div，其中是子组件

[style.margin]=“showBreadcrum？”2rem:：null

breadcrumb-fixed {
position: fixed;
z-index: 2;
width: 100%;