html - 容器 div 不会调整到子 Angular 组件高度

Question

我有以下 Ionic 应用程序 example in Stackblitz .你会看到有一个名为 <my-video></my-video> 的自定义 Angular 组件。 , 一个 ion-list和一个按钮。我想要的是:

• 把ion-list在视频之上。这样，ion-list与视频重叠。
• 将按钮放在视频下方。

这就是我现在所拥有的，你可以看到 Stackblitz 示例中的代码(包括 CSS 代码):

我认为问题可能是 video-container与其 child 的高度不一样my-video ，但我不知道为什么。

我尝试了不同的定位配置(位置 relative 、 absolute 、 static 等)但没有效果。实现此目标的正确方法是什么？

Answer 1

我认为问题在于 my-video 是绝对定位的，这意味着它脱离了基于 my-video 的定位和将按钮定位到任何位置的自然流程> 非常棘手，这不是我们想要的，所以你需要使 my-video 的定位相对，保持选项列表的绝对位置，但还要添加 top: 0 和 left: 0，比如所以

.video-container {
    position: relative;

    my-video {
        position: relative;
        width: 100%;
        background-color: red;
    }

    .options-list {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.finish-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 32px;
    position: relative;
}

现在按钮可以转到屏幕底部，因为 my-video 正在定位流中