如何将div覆盖在另一个[重复]答案

【问题标题】：How to overlay div over another [duplicate]如何将div覆盖在另一个[重复]
【发布时间】：2022-01-12 17:44:07
【问题描述】：

我正在尝试通过使用 CSS 的位置 absolute 和 top 属性来将两个 divs 覆盖在主要 div 上。但我不知道为响应式视图执行此操作的正确方法。

Video SDK 会在主 div 中注入视频流。但这上面有某种黑色背景，我想将其删除。由于我找不到任何其他方式，我能想到的最后一个选项是使用 div 和 CSS 手动隐藏顶部和底部的黑色部分。

快照 - 这里整个视图是一个 div，我想删除视频卡顶部和底部的黑色背景

我希望它是这样的 -

我已经放置了两个 div，一个在顶部，另一个在底部，并赋予它们灰色的背景！但我不认为这是这样做的方法。我怎样才能让它工作，这样即使在调整浏览器大小后它也不会中断！

代码-

<div id="root" style="position: relative; display: block; max-width: 100%; text-align: center; margin-top: 10%; height: 80vh; margin-right: auto; margin-left:auto">
                <!-- Video SDK will inject the video stream here -->
</div>
            <div id="hide_top" style="position: absolute;height: 12vh;width: 76vw;background: gray;top: 20%;"></div>
            <div id="hide_bottom" style="position:absolute;height: 15vh;width: 76vw;background: gray;top: 54%;"></div>

【问题讨论】：

通常div应该放在容器内，他们可能还需要width:100%

标签： javascript css bootstrap-4

【解决方案1】：

您可以将 CSS 位置属性与 z-index 属性结合使用，将单个 div 覆盖在另一个 div 元素上。 z-index 属性确定定位元素（即位置值为绝对、固定或相对之一的元素）的堆叠顺序。

让我们尝试以下示例以了解其工作原理：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CSS Overlaying One DIV over Another DIV</title>
        <style> 
            .container {
              width: 200px;
              height: 200px;
              position: relative;
              margin: 20px;
            }

            .box {
              width: 100%;
              height: 100%;            
              position: absolute;
              top: 0;
              left: 0;
              opacity: 0.8;  /* for demo purpose  */
            }

            .stack-top {
              z-index: 9;
              margin: 20px; /* for demo purpose  */
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box" style="background: red;"></div>
            <div class="box stack-top" style="background: blue;"></div>
        </div>
    </body>
</html>

【讨论】：