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而不是之后

回答

相关问题