В течение нескольких дней я безуспешно пытался решить проблему с наложением двух элементов div. Я хочу, чтобы .kolonneWrapper находился под .shrink-wrap, вместо этого .shrink-wrap исчезает под .kolonneWrapper, как этот подзаголовок исчезает. Как я могу это исправить? 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--> 

 
2
user8063658 28 Май 2017 в 12:41

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

}
0
Ehsan 28 Май 2017 в 10:44

Попробуйте дать им z-index со всеми вашими кодами, добавьте эти наборы строк

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

И

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

это всего лишь руководство, вы должны играть больше с z-index для стека свой контент вы можете проверить на этой странице Mozilla

0
Hassan Sani 28 Май 2017 в 10:21