So lassen Sie ein Div in CSS unter einem anderen Div erscheinen

Question

Ich habe zwei Divs, die in einem Div namens .content verschachtelt sind. Darin habe ich eine img.png und ich möchte ein weiteres Div mit einigen Kästchen darin, die unter der Datei img.png

liegen.

<div class="navBox">
            <a href="#contact">/*Kontaktinformationen*/</a>
        </div>
        <div class="navBox">
            <a href="#expertise">/*Expertise*/</a>
        </div>
        <div class="navBox">
            <a href="#projects">/*projects*/</a>
        </div>

Außerdem habe ich jede mögliche Kombination aus Positionierung, Auffüllung und Rändern ausprobiert, aber nicht den Z-Index (ich bin mir nicht sicher, wie man ihn verwendet) und habe keine guten Ergebnisse erzielt.

Vielen Dank im Voraus.

*Bearbeiten: Es ist mir gelungen, andere Verteilungsmethoden zu verwenden.

.mainBox{
    Position: relativ;
    Anzeige: Flex;
    Breite: 95 %;
    Höhe: 25 Vh;
    Polsterung oben: 5vh;
    justify-content: space-evenly;
    align-items: left;
    vertikal ausrichten: Mitte;
}

.navBox{
    Polsterung oben: 25px;
    padding-left: 10px;
    padding-right: 10px;
    Breite: 20 %;
    Höhe: 20vh;
    Textausrichtung: Mitte;
    oben: 50 %;
    Hintergrund: transparent;
}

.navBox a:hover{
    Polsterung oben: 50 %;
    Hintergrund: transparent;
    Farbe: var(--text-color);
    Textdekoration: keine;
    
}

a:besucht, a:aktiv, a:link{
    Textdekoration: keine;
    Farbe: var(--text-color);
}

.navBox a{
    vertikal ausrichten: Mitte;
    Farbe: var(--text-color);
    Polsterung oben: 0,5rem;
}

Answer 1

下次请分享你的代码而不是截图，无论如何，这里是一个不使用z-index的示例代码

HTML

<div class="container">
  <div class="your-image">&nbsp;</div>
  <div class="your-boxes">&nbsp;</div>
</div>

CSS

.container {
  display: grid;
  grid-template-rows: 1 / 1;
  grid-template-columns: 1 / 1;
  justify-items: center;
  align-items: center
}

.your-image {
  background-color: red;
  width: 250px;
  height: 250px;
  grid-area: 1 / 1 / 1 / 1;
}

.your-boxes {
  background-color: green;
  width: 150px;
  height: 150px;
  grid-area: 1 / 1 / 1 / 1;
  justify-self: center;
}

基本上，你创建了一个1x1的网格，将两个div重叠在同一列和同一行上。

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