Divs重叠的子标题

Question

我对HTML和CSS颇为陌生，并一直在努力寻找解决方案。问题是.wrapper2与文本和图像重叠.wrapper1与子标题。这里是小提琴https://jsfiddle.net/c85frkjd/。 是会很感激的帮助:)

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

他们都absolute LY定位和他们都没有拥有top。为防止它们重叠，请将position: relative添加到父项中，并将top的值设置为.wrapper2，这会将其推到.wrapper1的高度以下。由于.wrapper1为200像素（高） - 10px的（负上边距），该top为.wrapper2应该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

因为你定位.wrapper-1和.wrapper-2绝对，这意味着你基本上是将两张纸直接放在一个叠的上面，这样它们可以相互覆盖。如果你把它们放在相对位置，那么就好像将每张纸并排放在平坦的表面上。你可以将棋子移动到另一个之上，但除非添加了一些额外的代码，否则它们不会相互重叠或覆盖。他们将围绕对方定位。你可以说，这件作品在另一件作品的旁边，或者在上面或下面，但不是直接在上面或下面。所以要解决您的问题，您需要将它们更改为相对定位。