與vw的劃分重疊

我有幾天試圖解決兩個div重疊沒有任何運氣的問題。我想.kolonneWrapper在下面.shrink-wrap，而不是.shrink-wrap消失在.kolonneWrapper下面這樣subheader disappears.我該如何解決這個問題？ https://jsfiddle.net/s2wmLjhq/與vw的劃分重疊

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; \t 
 
    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-->

來源

2017-05-28 Y.K

分享您像的jsfiddle實際代碼或codepen，這樣就可以得到準確的解決方案 – Bhuwan

我可以告訴你，在這種情況下'vw'單位可能是無關的。高度看起來很腥，記住它是父元素的100％高度，但是你沒有設置高度。你在css中使用'totalWrapper'，但是在你的html中使用'wrapper'。還有'background-size'中缺少的破折號，（但我猜瀏覽器跳過了那一行）。而jsfiddle似乎不符合圖片。也許你可以提供更多的上下文（就像你面臨的實際問題）。在這一點上，很難弄清楚你有什麼。（另外我認爲Z指數的建議是無稽之談） – ippi

1）必須爲.shrink-wrap

對於實例分配Height：

.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 

}

來源

2017-05-28 10:29:57 Ehsan

高度需要響應，這就是爲什麼它設置爲100％。 –

查看更新的帖子 – Ehsan

儘量給他們的z-index與您的所有代碼添加此套系

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

和

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

的，這只是股份公司UIDE你應該用z-index的多玩疊你的內容，你可以看看這個Mozilla Page

來源

2017-05-28 10:21:45

它不起作用。 –

與vw的劃分重疊

回答

相關問題