I want to position a div element so that the bottom half overlaps another div element. You can view a basic layout here
When the transform property is enabled for .overlay, the element is moved halfway down but it also shows the white space of the parent container. Is there any way to prevent this and achieve a solution without any space before the dark-gray div? I would like to avoid using a negative margin-top if there is a better alternative.
This layout is not fixed and can be modified if necessary.
.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>