<分区>
javascript - 如何使用 Bootstrap 或 CSS 将容器 div 覆盖在另一个容器上
我使用 Bootstrap 4 设计了一个布局，其中容器 b 位于容器 A 的旁边。但我希望容器 B 覆盖容器 A 的某些部分，如图所示。 我怎样才能实现这种类型的布局？任何帮助或引用将不胜感激。
<!-- container A -->
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<h4>HOW IT WORKS</h4>
</div>
</div>
<div class="row text-center">
<div class="offset-md-2 col-md-2 px-0">
<div class="card">
<div class="card-header">
card 1 title
</div>
<div class="card-body">
card 1 body
</div>
</div>
</div>
<div class="offset-md-1 col-md-2">
<div class="card">
<div class="card-header">
card 2 header
</div>
<div class="card-body">
card 2 body
</div>
</div>
</div>
<div class="offset-md-1 col-md-2">
<div class="card">
<div class="card-header">
card 3 header
</div>
<div class="card-body">
card 4 body
</div>
</div>
</div>
</div>
</div>
<!-- container B -->
<div class="container rounded-border">
<div class="row">
<div class="col-12 text-center">
<h4 class="display-4">What is Lorem Ipsum</h4>
<p>
ustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker includin
</p>
</div>
</div>
</div>最佳答案
这是一个直接的 CSS 解决方案，它只在 relative 定位元素中使用了一个 absolute 定位元素。 top 和 left 样式属性确定容器 B 相对于其父 div 的显示位置。
#outerContainer{
position: relative;
}
#containerA{
height: 100px;
width: 500px;
border: solid 1px gray;
}
#containerB{
position: absolute;
top: 50px;
left: 100px;
height: 100px;
width: 300px;
z-index: 1;
background-color: maroon;
color: white;
border: solid 1px gray;
}
#rest-of-page{
height: 100px;
width: 500px;
border: solid 1px gray;
}<div id="outerContainer">
<div id="containerA">Container A</div>
<div id="containerB">Container B</div>
<div id="rest-of-page">(Rest of Page)</div>
</div>关于javascript - 如何使用 Bootstrap 或 CSS 将容器 div 覆盖在另一个容器上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54588047/