Divs are overlapping subheader - html

Question

I am rather new to HTML and CSS, and have been struggling to find a solution to a problem. The problem is that .wrapper2 with text and image is overlapping .wrapper1 with subheader. Here is the fiddle https://jsfiddle.net/c85frkjd/ .
Is would really appreciate the help:)
CSS:
.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%;
}
HTML:
<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-->

Answer 1

They're both absolutely positioned and neither of them has a top. To keep them from overlapping, add position: relative to the parent, and a top value for .wrapper2 that will push it below the height of .wrapper1. Since .wrapper1 is 200px (height) - 10px (negative top margin), the top for .wrapper2 should be 190px
.totalWrapper {
width: 964px;
height: auto;
margin-bottom: 250px;
box-sizing: border-box;
padding: 0;
position: relative;
}
.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;
top: 190px;
}
.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-->

Answer 2

Since you are positioning .wrapper-1 and .wrapper-2 absolutely, this means you are essentially setting two pieces of paper directly on top of each other in a stack, so they can equally cover each other. If you position them relatively, then it would be like laying each piece of paper side by side on a flat surface. You could move the pieces around so one is above another, but they wouldn't overlap or cover each other unless you added some extra code. They would be positioned around each other. You could say, this piece is beside the other piece, or above or below, but not directly on top of or under. So to fix your issue, you need to change them to be positioned relatively.