css HTML:< Details>在其他人之上< articles>

kd3sttzy  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(112)

你好,抱歉我的英语不好,这不是我的第一语言。我创建了一个混合使用文章,细节和摘要的Html。它看起来不错,但我希望当你点击摘要时,细节出现在它下面的其他文章的顶部。现在它没有这种行为:
behavior ----〉expected_behavior
我的html代码:

<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>

在“.citas_totales”的左边,会有一个过滤搜索表单,我没有放在这里。
我的CSS:

#caja{
    display: flex;
}

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

}

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

一个二个一个一个
我不知道我应该使用什么,我读过关于“z-index”的文章,但我不知道如何正确地实现它。
编辑:我已经修改了我的问题的标题和内容,因为我意识到我没有很好地解释自己。

jv4diomz

jv4diomz1#

要在HTML中重叠这样的内容,您需要打破文档的正常流程。一种方法是使用position: absolute,您可以将其与z-index结合使用以强制分层。在您的场景中,简单的版本如下所示:

#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>

取决于你最终的产品是什么样子,从长远来看,这可能是也可能不是一个很好的解决方案--position: absolute有时很难维护,手动设置z-index也有点可疑,但对于低到中等复杂度的应用程序,这仍然可以很好地工作。

相关问题