在没有 space 的情况下将一个 div 覆盖在另一个 div 之上

Question

我想将一个 div 元素的下半部分放在另一个 div 元素之上。你可以看到一个简单的标记 here

如果您为 .overlay 启用 transform 属性，则该元素将被向下推一半，但父容器的白色 space 也是可见的。有没有机会避免这种情况并在深灰色 div 之前没有任何 space 的情况下获得解决方案？如果可能有更好的解决方案，我也想避免设置负边距顶部。

此标记未修复，如有必要可更改。

.overlay {
  height: 200px;
  //transform: translateY(50%);
}

.overlay .col {
  background: #333;
}

.jumbotron {
  height: 400px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div class="container">
  <div class="row">
    <div class="col-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incin proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="col-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incin proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="container">
    <div class="row overlay no-gutters">
      <div class="col col-12 mx-auto">

      </div>
    </div>
  </div>
  <div class="jumbotron">
    <div class="container">
      <div class="row">
        <div class="col-1 mx-auto">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

除了负边距，我能想到的唯一其他方法是在 .col...

上使用伪 ::after 元素

https://www.bootply.com/Ukc9jdDGnM

.overlay .col::after {
    left: 0;
    width: 100%;
    background: #333;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateY(50%);
}

Answer 2

我不是很清楚，问题是什么。但如果前面的答案是正确的，那么我所做的只是将 height 添加到 .overlay .col

.overlay .col {
  background: #333;
  height:300px;
}

/* CSS used here will be applied after bootstrap.css */

.overlay {
  height: 200px;
  //transform: translateY(50%);
}

.overlay .col {
  background: #333;
  height: 300px;
}

.jumbotron {
  height: 400px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incin proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="col-6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incin proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>
<div class="wrapper">
  <div class="container">
    <div class="row overlay no-gutters">
      <div class="col col-12 mx-auto">

      </div>
    </div>
  </div>
  <div class="jumbotron">
    <div class="container">
      <div class="row">
        <div class="col-12 mx-auto">
        </div>
      </div>
    </div>
  </div>
</div>

在没有 space 的情况下将一个 div 覆盖在另一个 div 之上

Overlay one div over other div without space

html

css

twitter-bootstrap

bootstrap-4

twitter-bootstrap-4