如何删除由于填充或顶部属性而产生的额外空间

Question

我需要在div的顶部显示50％的图像，并且我使用css的组合使其工作到top: -100px;，它在标题＆amp;下面增加了额外的区域。我不想要的副标题

https://codepen.io/anon/pen/JLBxBP

.main-wrapper{ position:relative; width:100%; height:100%; margin:0 auto;background-color:yellow;}
.content-wrapper{ height:500px; background-color:blue; max-width:1070px;}

.gb-red{background-color:#f00;}
.gb-green{background-color:green;}

.cover-image-w{position:relative;z-index:2;}
.center-img {margin: 0 auto; max-height:250px; z-index:2;}
.titles-w {
	position: relative;
	width: 100%;
	z-index: 1;
	background-color: #EFEFEF;
	min-height: 125px;
	border-top: 125px solid yellow;
	padding-bottom: 10px;
	top: -100px;
}
.titles-w  > h1 { font-size:18px; width:100%; text-align:center;font-weight:600; margin:5px 0 5px 0;}
.titles-w  > h2 { font-size:15px; width:100%; text-align:center; margin:10px 0 5px 0;}

 <div class="main-wrapper">
    <div class="container content-wrapper"> 
    		<div class="row"> 
    			<div class="col-md-5 col-sm-5 col-sm-push-7 gb-red">
    			<div class="cover-image-w">
						<img class="img-responsive center-img" src="https://topbackgroundwallpaper.com/wp-content/uploads/2018/01/images-mobile-wallpaper-1200-swan-l.jpg" alt="">
						
					</div>
					<div class="titles-w">
						<h1>TITLE HERE</h1>
						<h2>SU TITLE</h2>
					</div>
    			</div>
    			<div class="col-md-7 col-sm-7 col-sm-pull-5 gb-green">
    				<div class="latest-art-w">
						<h1>Trump threatens tariffs on Chinese industrial goods</h1>
						<p>Duties of 25% planned for products as ranging from robots asdasdand trains to snowblowers. Duties of 25% planned for products ranging from robots and trains to snowblowers. Duties of 25% planned for products ranging from robots and trains to snowblowers Duties of 25% planned for products ranging from robots and trains to snowblowers</p>
					</div>
    			</div>
    		</div>
    	</div>
      	</div>

不知道如何删除多余的空间，如本例所示。

图片插图

Answer 1

使用top: -100px更改margin-top: -100px，以便正确计算父元素的高度。

事实上，如果您使用top（或left/right/bottom）和relative位置移动元素，则不会影响或重新计算其父容器的周围空间（这将是计算为元素位于static位置）。

Answer 2

您可以向.titles-w元素添加负边距，以减少下方的空间。例如：

.titles-w {
    position: relative;
    width: 100%;
    z-index: 1;
    background-color: #EFEFEF;
    min-height: 125px;
    border-top: 125px solid yellow;
    padding-bottom: 10px;
    top: -100px;
    margin-bottom: -100px;
}

见https://codepen.io/anon/pen/WzKPVy。您可能希望增加边距以说明-85px以保持红色边框效果。