Html div是重叠的副标题

我对HTML和CSS比较陌生，一直在努力寻找问题的解决方案。问题是带有文本和图像的.wrapper2与带有副标题的.wrapper1重叠。这是小提琴。 非常感谢您的帮助：）

CSS:

HTML:

文本文本文本文本
textt

文本文本文本文本文本

它们都是

绝对的

。要防止它们重叠，请将

位置：相对

添加到父级，并为

.wrapper2

添加一个

顶部

值，该值将其推到

.wrapper1

的高度以下。由于

.wrapper1

是200px（高度）-10px（负上边距），

.wrapper2

的

top

应该是

190px

.totalWrapper{
宽度：964px；
高度：自动；
边缘底部：250px；
框大小：边框框；
填充：0；
位置：相对位置；
}
.wrapper 1{
宽度：964px；
高度：200px；
位置：绝对位置；
左：50%；
左边缘：-50%；
利润上限：-10px；
}
.收缩包装{
宽度：100vw；
身高：100%；
前-5%；
位置：相对位置；
溢出：可见；
显示：内联块；
}
.子标题图像{
宽度：100vw；
身高：100%；
左：50%；
右：50%；
左边距：-50vw；
保证金权利：-50vw；
背景：url(http://localhost/wordpress/wp-content/uploads/2017/04/sandwichmaaler.png)中心不重复；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-ms背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
位置：绝对位置；
溢出：可见；
}
.SubheaderImageTekst h1{
宽度：100%；
顶部：35px；
对齐项目：居中；
位置：绝对位置；
字体系列：“Roboto Slab”，无衬线；
文本对齐：居中；
字体大小：36px；
颜色：#fff；
z指数：；
}
.子标题图像技术{
宽度：100%；
位置：绝对位置；
顶部：95px；
颜色：#a8adb1；
线高：26px；
字体系列：“Roboto Slab”，无衬线；
文本对齐：居中；
字体大小：300；
字号：18px；
}
.wrapper 2{
宽度：964px；
高度：自动；
保证金：0；
填充：30px0；
位置：绝对位置；
z指数：1；
顶部：190px；
}
科隆先生1{
浮动：左；
宽度：100%；
高度：自动；
边缘顶端：40px；
-webkit列数：2；
-moz列数：2；
列数：2；
-webkit柱间隙：60px；
-moz柱间距：60px；
柱间距：60px；
}
科隆先生1{
高度：自动；
利润上限：-20px；
宽度：85%；
}

文本文本文本文本
textt

文本文本文本文本文本

由于您完全定位.wrapper-1和.wrapper-2，这意味着您实际上是将两张纸直接放在一个纸堆中的另一张纸上，以便它们可以相等地相互覆盖。如果你相对地放置它们，那就像把每一张纸并排放在一个平面上。您可以移动各个部分，使一个在另一个之上，但它们不会重叠或相互覆盖，除非您添加一些额外的代码。它们将被放置在彼此周围。你可以说，这一块在另一块的旁边，或在上面或下面，但不是直接在上面或下面。因此，要解决您的问题，您需要将它们更改为相对位置

.totalWrapper{
width: 964px;
height: auto;
margin-bottom: 250px;
box-sizing: border-box;
padding: 0;
}
.wrapper1{
width: 964px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -50%;
margin-top: -10px;
}
.shrink-wrap{
width: 100vw;
height: 100%;
top: -5%;
position: relative;
overflow: visible;
display: inline-block;
}
.subSubHeaderImage{ 
width: 100vw;
height: 100%;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right:-50vw;
background: url(http://localhost/wordpress/wp-
content/uploads/2017/04/sandwichmaaler.png) center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;     
position: absolute;
overflow: visible; 
}
.subSubHeaderImageTekst h1{
width: 100%;
top: 35px;
align-items: center;
position: absolute;  
font-family: "Roboto Slab", sans-serif; 
text-align: center;
font-size: 36px;
color: #fff; 
z-index: ; 
}
.subSubHeaderImageTekst p{
width: 100%;
position: absolute;  
top: 95px;
color: #a8adb1;
line-height: 26px;
font-family: "Roboto Slab", sans-serif; 
text-align: center;
font-weight: 300;
font-size: 18px;  
}
.wrapper2{
width: 964px;
height: auto;
margin: 0;
padding: 30px 0;
position: absolute;
z-index: 1;
}
.kolonne1{
float: left;
width: 100%; 
height: auto;
margin-top: 40px;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 60px; 
-moz-column-gap: 60px;  
column-gap: 60px;       
}
.kolonne1 img{
height: auto;
margin-top: -20px;
width: 85%;
}

<div class="totalWrapper"> 

<div class="wrapper1">
<div class="shrink-wrap">
<div class="subSubHeaderImage">
</div> <!--end of .subSubHeaderImage-->

<div class="subSubHeaderImageTekst">
<h1>texttexttexttext</h1>
<p>texttexttexttextt</p>
</div> <!--end of .subSubHeaderImageTekst-->

</div> <!--end of .shrink-wrap-->
</div> <!--end of .wrapper1-->

<div class="wrapper2">
<div class="kolonne1">
texttexttexttexttexttexttext
<img src="http://localhost/wordpress/wp-
content/uploads/2017/04/burger_lille-300x200.png" alt="burger" width="350" 
height="233"/>
</div> <!--end of .kolonne1-->
</div> <!--end of .wrapper2-->

<div class="push">
</div> <!--end of .push-->

</div> <!--end of .totalWrapper-->