在 Bootstrap 5 响应式设计中使用图像覆盖 Div答案

【问题标题】：Overlay Divs with Images in Bootstrap 5 Responsive Design在 Bootstrap 5 响应式设计中使用图像覆盖 Div
【发布时间】：2022-11-04 09:12:12
【问题描述】：

我正在设计一个基本的 Bootstrap 5 起点，使用卡体内的旋转木马，它可以在桌面、平板电脑和 PC 视口中正确地全宽工作。

然而，该设计需要使用 z-index 值将多个相同的高度和宽度的 div 重叠/堆叠在一起，这些值需要以相同的方式运行：调整大小并以相同的方式保持卡体填充。

使用相对和绝对定位并指定宽度和高度值似乎确实有效，包括 100%。

【问题讨论】：

我在这里看不到问题。

标签： css css-position overlay bootstrap-5

【解决方案1】：

要将元素作为“层”插入，您需要一些先决条件：

父级必须有一个定义的高度（不能是百分比，也不能是自动的，它必须是 px、em、rem、cm...）。
父级必须将位置设置为相对、绝对或固定。
孩子需要陪伴

.layer{位置：绝对，顶部：0；左：0；宽度：100%；高度：100%}

如果下一层是父层的最后一个子层，则不需要使用 z-index

<style>
    p{
        margin-top: 0;
    }
    .carroussel-item{
         position: relative;
    }
    .layers{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class="carroussel-item">
    <img src="https://placeimg.com/1000/1000/tech">

    <div class="layers layer-1">
        <img src="https://placeimg.com/1000/1000/nature">

        <div class="layers layer-2">
            <img src="https://placeimg.com/1000/1000/people">

            <div class="layers layer-3">
                <img src="https://placeimg.com/1000/1000/arch">
            </div>
        </div>
    </div>
</div>

【讨论】：

这次真是万分感谢。我在考虑一个基本图像，就像一个光圈一样，以在调整大小时保持设计，你对此有何想法，或者绝对是在寻找硬值来定义它们需要适应的空间？我不确定我会如何做到这一点，但只是一个想法。
我不认为用 JS 动态设置这些值会是一个解决方案吗？
@BaMa 使用 JS 是可能的，但它会减慢你的代码。但它遵循相同的规则。只要 JS 抛出一个定义的值（比如 px），其余的代码就会开始工作。
谢谢@Luis，使用@media 有用吗？我不知道如何实现这些，但我认为它们可以使用最大宽度，比如移动设备为 368px，平板电脑为 768px...？谢谢你。
需要明确的是，div 不会根据您的示例进行嵌套，而是按如下方式堆叠，并且它们需要根据设计将外部 div/card 填充为列宽 100%：<div class="outer-wrapper"> <div class="carroussel-item"> <div id="layer-1" class="layers layer-1"> <img src="placeimg.com/1000/1000/tech" alt="" /> </div>  </div> </div>

【解决方案2】：

body, html { height: 100%; margin: 0; }
.bg { 
  background-image: url("https://i.ibb.co/XJDwDfH/i.webp"); 
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg div { width: 70px; height: 70px; }

<div class="bg">
  <div style="background-color:coral;"></div>
</div>

【讨论】：