div前往div而不是之後

我面臨一個問題，我敢肯定有一個簡單的解決方案，但我找不到它。div前往div而不是之後

我有兩個div。第一個模糊背景圖像和內容。它工作得很好。但第二個div而不是在第一個div之後。

這裏是我的代碼：

<div class="section1"> 
    <!-- Content here --> 
</div> 
<div class="section2"> 
    <!-- Content here --> 
</div>

我的CSS：

.section1 { 
    display: flex; 
    flex-direction: column; 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: 0; 
    height: 100%; 
    margin-top: 100px; 
} 
.section1:before { 
    content: ""; 
    background: url('/images/background.jpg') center center; 
    height: 100%; 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: -1; 
    display: block; 
    filter: blur(5px); 
} 

.section2 { 
    padding: 50px 0; 
    display: flex; 
    flex-direction: row; 
    flex: 1; 
    background-color: #FF5D63; 
}

我添加了一個邊距在SECTION1爲示範的緣故。結果如下圖所示：

來源

2016-04-28 G. Hamaide

你能告訴我確切佈局ü想達到什麼目的？ – Fiido93

我想要圖像下的紅色div。像垂直下。你需要滾動才能看到它。 –

因爲.section1有固定的位置和.section2在默認情況下靜態的位置，你必須指定例如在.section2一個relative位置，使其上面去第一個默認爲z-index，值爲2。

See this fiddle

我喜歡上如此，因爲它解釋的z-index值是怎麼算分享這個答案，它是很好的解釋： https://stackoverflow.com/a/7490187/6028607

來源

2016-04-28 09:24:00

但是如何在它下面呢？就像兩個div一樣跟着對方？ –

您可以更改'z-index'值。小提琴：https：//jsfiddle.net/8oxyyd1p/2/ –

div前往div而不是之後

回答

相關問題