iT邦幫忙

0

display: flex 的屬性問題

如題:display: flex 的屬性問題

先附上程式碼
https://codepen.io/willlai/pen/poJNozL

為什麼.row設定display: flex 之後
下一層的.aa就可以設定z-index,讓此層提上前
但將.row設定display: block卻又無法

想請問這是display: flex 什麼屬性影響的關西?
感謝

2 個回答

0
mominimaple
iT邦新手 5 級 ‧ 2020-02-21 17:14:16

看起來應該是你用了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;
}
willlai iT邦新手 5 級 ‧ 2020-02-22 17:04:02 檢舉

謝謝你的專業回答

1
marlin12
iT邦新手 1 級 ‧ 2020-02-22 20:28:44

為什麼.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

willlai iT邦新手 5 級 ‧ 2020-02-25 10:41:43 檢舉

謝謝你

我要發表回答

立即登入回答