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定位，他们都没有top。为防止它们重叠，请将position: relative添加到父级，并将top的{{1}}值添加到.wrapper2的高度以下。由于.wrapper1为200px（高度） - 10px（负上边距），.wrapper1的{{1}}应为top

＆＃13;

.wrapper2

＆＃13;

190px

＆＃13;

Answer 2

由于您绝对定位.wrapper-1和.wrapper-2，这意味着您实际上是将两张纸直接放在堆叠中彼此叠加，因此它们可以相同地相互覆盖。如果相对放置它们，那就像将每张纸并排放在平坦的表面上一样。你可以移动这些碎片，使一个在另一个之上，但除非你添加了一些额外的代码，否则它们不会重叠或相互覆盖。它们将彼此相对定位。你可以说，这件作品是在另一件作品旁边，或者在上面或下面，但不是直接在上面或下面。因此，要解决您的问题，您需要将它们更改为相对定位。

Div是重叠的子标题

2 个答案: