如何在父 div 之上制作 div 行？答案

【问题标题】：How do I make row of div on top of parent div?如何在父 div 之上制作 div 行？
【发布时间】：2021-06-26 22:31:13
【问题描述】：

如何在父 div (image) 之上放置一行 div（有 3 列图像）。我正在使用 Bootstrap 5。以前我曾经做过postition: absolute。这里的问题是行溢出被隐藏了。我也试过overflow: visible。下面是代码示例和我得到的结果。感谢您的任何帮助。

.accomplishments{
  background: url("https://picsum.photos/1000/600");
  width: 100%;
  height: 40rem;
  background-size: cover;
  margin-top: 12rem;
  position: relative;
}

.project-tray{
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y:visible ;  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<main>
  <div class="container" >
    <h1 class="">Accomplishments</h1>
  </div>
  <div class="container-fluid  accomplishments mb-5 ">
    <div class="container" >
      <div class="row project-tray ">
        <div class="col " >
          <img src="https://picsum.photos/300/301" class="img-fluid " alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/302" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/303" class="img-fluid" alt="">
        </div>
      </div>
    </div>
  </div>
</main>

这里是输出的附加图像：

The output i am getting

Expected output (figma)

【问题讨论】：

在您的 HTML 中找不到标题为“成就”的容器。也请分享一下。
你好 Samir，<h1>Accomplishments</h1> 没有问题。这里的问题是溢出行以某种方式被隐藏了。我已经更新了图片。
我明白这一点。但为了给您提供解决方案，我们需要一个合适的、完整的结构。如果你能创建一个小提琴 (jsfiddle.net) 那就最好了。
您好 Samir，我已经为该部分添加了适当的代码结构。感谢您指出我的错误。
i.stack.imgur.com/K8wIB.png 这是您的预期输出吗？

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

一般来说，对于这样一个简单的布局，最好“避免”绝对位置（绝对位置会破坏normal flow + collapse height）。通过negative margin，很容易创建这种重叠（并保持正常流程）。

片段（与您想要的布局相同，只需一行自定义 CSS 即可解决）：

.negative-margin{
  margin-top: -150px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<main>
  <div class="container">
    <h1 class="">Accomplishments</h1>
  </div>
  <div class="container-fluid  accomplishments mb-5 ">
    <div class="container" >
      <div class="row project-tray ">
        <div class="col " >
          <img src="https://picsum.photos/201/300" class="img-fluid " alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/202/300" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/203/300" class="img-fluid" alt="">
        </div>
      </div>
    </div>
  </div>
  <div>
    <img class="img-fluid negative-margin" alt="Responsive image" src="https://picsum.photos/1920/1080">
  </div>
</main>

【讨论】：

【解决方案2】：

只是对引导结构进行了一些更改，并将 accomplishments 类从 container-fluid 类转移到 col-12 类。还添加了您的 stylesheet.css 中缺少的 margin-top: 200px !important; .accomplishments

.accomplishments {
  background: url(https://picsum.photos/1000/600);
  width: 100%;
  height: 36rem !important;
  margin-top: 200px !important;
  background-size: cover;
  position: relative;
}

.project-tray {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: visible;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<main>
  <div class="container heading">
    <h1 class="text-center pt-5">Accomplishments</h1>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 accomplishments">
        <div class="row project-tray ">
          <div class="col ">
            <img src="https://picsum.photos/300/301" class="img-fluid " alt="">
          </div>
          <div class="col">
            <img src="https://picsum.photos/300/302" class="img-fluid" alt="">
          </div>
          <div class="col">
            <img src="https://picsum.photos/300/303" class="img-fluid" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

【讨论】：

【解决方案3】：

我是网络开发的新手，但我认为您应该尝试删除 top: 0%; 属性，看看它是否会发生变化。

【讨论】：