看起來應該是你用了relative跟absolute,
但是.fields-parallax這個div跟.fields-cards是屬於平行階層,又只有.fields-parallax有absolute,變成需要z-index來決定誰前誰後;
以你的範例來看,.filds這應該是最外層,
裡面有一個大div(.fields-parallax),
裡面有兩個小div(.container跟.fields-cards)
調整一下每個div的關係:
<section class="fields">
<div class="fields-parallax">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum maiores sunt voluptate quam dolor
minus dolores, animi error aliquid suscipit, doloremque cupiditate odit obcaecati quibusdam
quisquam, fuga quis! Sunt?
</div>
<div class="fields-cards">
<div class="row">
<div class="aa"></div>
</div>
</div>
</div>
</section>
<div class="bb"></div>
CSS看起來會像這樣:
.fields {
border: 10px solid #000;
box-sizing: border-box;
display: flex;
}
.fields-parallax {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 800px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.95) 18%,
rgba(255, 255, 255, 0.8) 35%,
rgba(255, 255, 255, 0.1) 100%
),url('https://picsum.photos/1200/1200?random=3') fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.fields-cards {
top: 750px;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.aa {
width: 960px;
margin: auto;
height: 200px;
background: #f00;
border: 10px solid #ccc;
box-sizing: border-box;
}
.bb {
width: 100%;
height: 200px;
background: #4183ff;
}
為什麼.row設定display:flex之後
下一層的.aa就可以設定z-index
因為 這是display:flex的[副作用]。
.row應該用position:relative,不是display:flex。
元素的position屬性分為两類:[定位]和[非定位]。
position:static是[非定位]類型,其他的position屬性值(例如:relative、absolute)是[定位]類型。
[定位]類型的元素,會覆蓋在[非定位]類型的元素上面。
元素默認是position:static,它們只會隨著出現的次序排版,z-index對它們是沒有作用的。
如果要讓一個[非定位]元素覆蓋在[定位]元素上面,應該把該[非定位]元素改為[定位]元素,然後給予比要覆蓋的元素更大的z-index值。
另外,如果父元素是position:relative,在子元素加上position:absolute;top:0; left:0;是沒有意義的。
因此,可以簡化為
codepen