CSS で div を別の div の下に表示する方法

Question

.content という div 内に 2 つの div がネストされています。その中にimg.pngがあり、img.png

の下にあるいくつかのボックスを含む別のdivが必要です。

<div class="navBox">
            <a href="#contact">/*連絡先情報*/</a>
        </div>
        <div class="navBox">
            <a href="#expertise">/*専門知識*/</a>
        </div>
        <div class="navBox">
            <a href="#projects">/*プロジェクト*/</a>
        </div>

また、位置決め、パディング、マージンの可能なすべての組み合わせを試しましたが、Z インデックス (使い方がわかりません) は試しませんでしたが、良い結果が得られませんでした。

よろしくお願いします。

*編集: 他の配布方法を使用することができました。

.mainBox{
    位置: 相対的;
    ディスプレイ: フレックス;
    幅: 95%;
    高さ: 25vh;
    パディングトップ: 5vh;
    コンテンツの位置揃え: 均等なスペース;
    整列項目: 左;
    垂直配置: 中央;
}

.navBox{
    パディングトップ: 25px;
    パディング左: 10px;
    パディング右: 10px;
    幅: 20%;
    高さ: 20vh;
    テキスト整列: 中央;
    トップ: 50%;
    背景: 透明;
}

.navBox a:hover{
    パディングトップ: 50%;
    背景: 透明;
    色: var(--text-color);
    テキスト装飾: なし。
    
}

a:訪問済み、a:アクティブ、a:リンク{
    テキスト装飾: なし。
    色: var(--text-color);
}

.navBox a{
    垂直配置: 中央;
    色: var(--text-color);
    パディングトップ: 0.5rem;
}

Answer 1

次回はスクリーンショットの代わりにコードを共有してください。とにかく、これは z-index を使用しないサンプル コードです。

HTML

リーリー

CSSS

リーリー

基本的には、1x1 グリッドを作成し、同じ列と行に 2 つの div を重ねます。

https://codepen.io/ChrisCoder9000/pen/NWMJdBo