Question

我有好几天试图解决一个问题，两个div重叠没有任何运气。我希望.kolonneWrapper位于.shrink-wrap下面，而.shol-wrap会在.kolonneWrapper下消失，就像这样subheader disappears.我该怎么纠正这个？ https://jsfiddle.net/s2wmLjhq/

html, body{
  width: 100%;
  height: auto;
  margin: 0;
}
.totalWrapper{
  width: 964px;
  height: auto;
  position: absolute;
  left: 50%;
  margin-left: -50%;
}
.shrink-wrap{
  width: 100vw;
  height: 100%;
  top: -10%;
  margin: -15px 0 0 0;
  position: relative;
  overflow: visible;
  display: flex;
}
.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; 
}
.kolonneWrapper{
  width: 100vw;
  height: auto;
  margin: 0px auto -30px auto
  background-position: center;
  background: #fff;
  background size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  overflow: visible;
  padding: 50px 0;
  position: absolute; 
}
.wrapperImidten{
  width: 964px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

<div class="wrapper"> 
  <div class="shrink-wrap">
    <div class="subSubHeaderImage"></div>
  </div> <!--end of .shrink-wrap-->

  <div class="kolonneWrapper">
    <div class="wrapperImidten">
    </div> <!--end of .wrapperImidten-->
  </div> <!--end of .kolonneWrapper-->

</div> <!--end of .wrapper-->

Answer 1

尝试给他们z-index，你的所有代码都添加这些行

.subSubHeaderImage{
position: relative;
z-index: 1;
}

和

.kolonneWrapper{
position: relative;
z-index: 0;
}

这只是一个指南，您应该使用z-index进行更多堆叠您可以查看此内容Mozilla Page

Answer 2

1）您必须为Height分配.shrink-wrap

例如：

.shrink-wrap{

  height: 500px;

}

2）如果你想使用height:100%必须指定父亲的身高（.wrapper）：

.wrapper {
    position: relative;
    height: 500px;

}

并使用height:100%：

.shrink-wrap{
  width: 100vw;
  height:100%;
  position: relative;
  overflow: visible;
  display: flex;
  background-color: red;
}

3）或使用vw单位像这样：

.shrink-wrap{

  height:100vw;

  //More codes

}

带有大众的分区是重叠的

2 个答案: