Z-indexが効かない

Question

⚫︎前提・実現したいこと
Bootstrapを使いサイト模写をしているのですが、赤丸の部分が空白になり重なりません。
２枚目写真は見本です。お手数ですが、ご教授願います。

⚫︎発生している問題
![

見本

⚫︎試したこと
親要素にrelative、子要素にabsolute、またz-indexの調整など色々試しましたが、うまくいきません。
以下の記事も参考にしましたが、解決できませんでした。
https://coliss.com/articles/build-websites/operation/css/4-reasons-z-index-isnt-working.html

⚫︎補足情報（FW/ツールのバージョンなど）
サイト表示はChromeで、コーディングはVScodeを使用しています。
MacOSです。

⚫︎該当のソースコード
HTML

<!-- XeoryExtensionの特徴------------------------------ -->
        <div class="feature">

            <div class="flex">
                <div class="icon">
                    <i class="fas fa-check pb-2"></i>
                </div>
            <h2 class="font-weight-normal text-white text-center">
                XeoryExtensionの特徴
            </h2>
            <p class="text-white text-center">feature</p>
            <div class="f-border">
                <span></span>
            </div>
        </div>
        
        <!-- XeoryExtensionの特徴 コンテンツ------------------------------ -->
        <div class="d-flex flex-wrap-reverse justify-content-center">
            <div class="col-md-7 col-12 p-0 align-self-center h3 px-4">
                <div class="f-number">1</div>
                <h1 class="mobile">モバイルレスポンシブ</h1>
                <p class="m-english">Mobile Responsive</p>
                <p>
                    Xeory
                    Extensionはレスポンシブデザインを採用しています。スマートフォンやタブレットなど各種デバイスで表示が最適化されます。
                </p>
                <div class="btn-f">
                    <a href class="btn-simple">詳しく見る</a>
                </div>
            </div>
            
            <div class="col-md-5 col-12 p-0 align-self-center">
                <img
                class="img-fluid"
                src="img/macbook-at-the-coffee-shop.jpg"
                alt=""
                />
            </div>
        </div>
    </div>

CSS

/* <!-- XeoryExtensionの特徴------------------------------ --> */
.feature {
    position: relative;
}

.flex {
    background: #3b4552;
}

.fa-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    color: #fff;
}

.flex p {
    font-size: 13px;
}

.f-border {
    position: absolute;
    bottom: -18px;
    width: 100%;
    z-index: 10;
    margin: 0;
}

.f-border span {
    display: block;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 56px solid transparent;
    border-right: 56px solid transparent;
    border-top: 18px solid #3b4552;
}

/* <!-- XeoryExtensionの特徴 コンテンツ------------------------------ --> */
.d-flex {
    position: absolute;
    left: 0;
    top: 125;
    z-index: 20;
}

.f-number {
    width: 34px;
    height: 73px;
    font-size: 16px;
    vertical-align: bottom;
    color: #fff;
    background: #47b39d;
    padding: 40px 12px 8px 12px;
}

.mobile,
.m-english {
    color: #47b39d;
}

.m-english {
    font-size: 10px;
}

.col-md-7 p {
    font-size: 17px;
}

.btn-simple {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 40px;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    transition: all ease-in-out 0.3s;
    background: #ff6c00;
    border-radius: 5px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.btn-simple:hover {
    opacity: 0.8;
}

.col-md-4 img {
    max-width: 100%;
    max-height: 100%;

Answer 1

z-index 前面、背面の位置関係ですので、上下の余白とは関係ないですね。

「マージンの相殺」により p のブラウザのデフォルトの margin が親要素の外側に出ています。

下記のようにデフォルトのmarginを削除しておくといいでしょう。

.flex p {
    font-size: 13px;
    margin-bottom: 0;
    padding-bottom: 1rem; /* デフォルトの余白が必要なら追加 */
}

あるいは、リセットCSSですべてのデフォルト設定をリセットしておくというのも一般的です。

Comments

[pontyan]

有難うございます。

p の marginなくなり数字の1（緑背景）の余白が消えました(*^^*)
ただ、 右側の画像のトップの余白が消えないのでどうしたものかと悩んでいます。
画像トップにはpadding margin共に余白はないので、単に画像が小さいだけなのかと思っていますが、いかがでしょう？

[hatena19]

bootstrapを使ってますよね。
画像のサイズとか分からないので適当な画像をあてはめてみましたが、余白はできませんでした。
実際のページのURLが分かれば原因を指摘出るとおもいますが、現状の情報からだけではわからないです。

[pontyan]

hatena19さん
ご返信大変遅くなってしまいすみません、、、m(_ _)m
送ったはずが送信できていませんでした。

ありがとうございます。またわからなければ、また詳細質問させていただきます。

Answer 2

featureのpにmarginがあるようです。
右クリック→要素を検証で開発者ツールを使って確認出来ますよ。

Comments

[pontyan]

有難うございます(*^^*)確認できました。