你好,抱歉我的英语不好,这不是我的第一语言。我创建了一个混合使用文章,细节和摘要的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”的文章,但我不知道如何正确地实现它。
编辑:我已经修改了我的问题的标题和内容,因为我意识到我没有很好地解释自己。
1条答案
按热度按时间jv4diomz1#
要在HTML中重叠这样的内容,您需要打破文档的正常流程。一种方法是使用
position: absolute
,您可以将其与z-index
结合使用以强制分层。在您的场景中,简单的版本如下所示:取决于你最终的产品是什么样子,从长远来看,这可能是也可能不是一个很好的解决方案--
position: absolute
有时很难维护,手动设置z-index
也有点可疑,但对于低到中等复杂度的应用程序,这仍然可以很好地工作。