HTML: <Details> on top of others <articles>

Question

Hello sorry for my bad English, it's not my first language. I have created an Html using a mixture of article, details and summary. It looks good, but I want that when you click on the summary, the details appear on top of other articles that are below it. Right now it does not have this behavior:

behavior ----> expected_behavior

My html code:

<section id="caja">
<article class="citas_totales">
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
</article>
</section>

There would be a search form by filtering, on the left of ".citas_totales", that I did not put here.

My css:

#caja{
    display: flex;
}

.citas_totales{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.citas{
  padding: 10px;
  background-color: antiquewhite;
  margin: 30px;
}

#caja{
    display: flex;
}

.citas_totales{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.citas{
  padding: 10px;
  background-color: antiquewhite;
  margin: 30px;
}



.fotos_citas{
    width: 200px;
}

<section id="caja">
<form action="#" id="filtros" class="prueba">
                <h2>Estado Civil</h2>
                <input type="checkbox" id="soltero" name="soltero" value="Soltero" class="estado_civil">
                <label for="soltero">Soltero</label><br>
                <input type="checkbox" id="casado" name="casado" value="Casado" class="estado_civil">
                <label for="casado">Casado</label><br>
                <input type="checkbox" id="divorciado" name="divorciado" value="Divorciado" class="estado_civil">
                <label for="divorciado">Divorciado</label><br>
                <input type="checkbox" id="otros" name="otros" value="Otros" class="estado_civil">
                <label for="otros">Otros</label><br>
                <h2>Edad</h2>
                <div data-role="rangeslider">
                    <label for="edad_minima">Minima:</label>
                    <input type="range" name="edad_minima" id="edad_minima" value="200" min="18" max="50"><br>
                    <label for="edad_maxima">Maxima:</label>
                    <input type="range" name="edad_maxima" id="edad_maxima" value="800" min="18" max="50">
                </div>
                <h2>Fumador</h2>
                <input type="checkbox" id="afirmativo" name="afirmativo" value="Si">
                <label for="afirmativo">Si</label><br>
                <input type="checkbox" id="negativo" name="negativo" value="No">
                <label for="negativo">No</label><br>
                <h2>Ciudad</h2>
            </form>
<article class="citas_totales">
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
</article>
</section>

I don't know what I should use, I've read about "z-index" but I don't know how to implement it correctly.

Edit: I have modified the title of my question and the content of my question since I realized that I was not explaining myself well.

Answer 1

To overlap things like this in HTML, you need to break the normal flow of the document. One way to do so is to use position: absolute, which you can combine with z-index to enforce the layering. With your scenario, the easy version would be something like this:

#caja{
    display: flex;
}

.citas_totales{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}

.citas{
  padding: 10px;
  background-color: antiquewhite;
  margin: 30px;
  padding-bottom: 20px;
  position: relative;

}



.fotos_citas{
    width: 200px;
}

details{
  position: absolute;
  margin-left: -10px;
  padding-left: 10px;
  box-sizing: border-box;
  width: 100%;
  background-color: antiquewhite;
  z-index: 1000;
  
}

<section id="caja">
<form action="#" id="filtros" class="prueba">
                <h2>Estado Civil</h2>
                <input type="checkbox" id="soltero" name="soltero" value="Soltero" class="estado_civil">
                <label for="soltero">Soltero</label><br>
                <input type="checkbox" id="casado" name="casado" value="Casado" class="estado_civil">
                <label for="casado">Casado</label><br>
                <input type="checkbox" id="divorciado" name="divorciado" value="Divorciado" class="estado_civil">
                <label for="divorciado">Divorciado</label><br>
                <input type="checkbox" id="otros" name="otros" value="Otros" class="estado_civil">
                <label for="otros">Otros</label><br>
                <h2>Edad</h2>
                <div data-role="rangeslider">
                    <label for="edad_minima">Minima:</label>
                    <input type="range" name="edad_minima" id="edad_minima" value="200" min="18" max="50"><br>
                    <label for="edad_maxima">Maxima:</label>
                    <input type="range" name="edad_maxima" id="edad_maxima" value="800" min="18" max="50">
                </div>
                <h2>Fumador</h2>
                <input type="checkbox" id="afirmativo" name="afirmativo" value="Si">
                <label for="afirmativo">Si</label><br>
                <input type="checkbox" id="negativo" name="negativo" value="No">
                <label for="negativo">No</label><br>
                <h2>Ciudad</h2>
            </form>
<article class="citas_totales">
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="https://i.vgy.me/9mb1ts.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
</article>
</section>

Depending on what your eventual product looks like, this may or may not be a great solution in the long run - position: absolute can be hard to maintain sometimes, and manually setting z-index is also a little shady, but for low-to-moderate complexity apps, this can still work just fine.