覆盖div与图像在Bootstrap 5响应式设计

Question

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

然而，该设计需要将多个相同高度和宽度的div与z-index值相互叠加/堆叠，这些值需要以相同的方式表现:以相同的方式调整大小并保持card-body填充

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

Answer 1

将元素插入到"你需要一些先决条件:

1. 父元素必须有一个定义的高度(它不能是百分比，也不能是自动的，它必须是px, em, rem, cm…)

2. 父节点的位置必须设置为相对位置、绝对位置或固定位置。

3. 儿童需要与

   。图层{位置:绝对，顶部:0;左:0;宽度:100%;高度:100%}

4. 如果下一层是父层的最后一个子层，则不需要使用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>

Answer 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>