Html 当其余内容为iframe时，在页面顶部放置警告横幅

我正在用Angular 7创建一个警报横幅，该横幅必须始终位于页面顶部，我可以使用

位置：fixed

和

z-index:999

来完成，但当用户滚动时，横幅会出现，我想删除此行为并使其粘贴在页面顶部，但我无法使其工作，因为我页面的其余部分是一个I框架

<div class="main-content">
    <div id="banner"></div>
    <iframe
        name="ci"
        id="custom_iframe"
        allowfullscreen="true"
        *ngIf="formUrl"
        allow="geolocation *; microphone *; camera *; midi *; encrypted-media *;"
        #iframe
    ></iframe>
</div>

页面上的示例（已滚动到底部）

---

这里的问题可能是因为iframe有一个完全不同的上下文，这意味着它的css不知道我的横幅存在，但我不知道该怎么做才能使它工作。

将如何将通知添加到iframe内容的DOM中？你的意思是在iframe中添加我的横幅（作为iframe的一个元素）？是；iframe.contentDocument.append（你的节点）如果你想让它和其余的一起滚动，为什么不使用position-absolute呢？

#banner{
    position: fixed;
    float: initial;
    z-index: 999;
    width:1900px;
    height:100px;
    background:blue;
}