可以在flex容器中堆叠图像吗？

问题描述

我有一个当前正在重构的项目，想知道是否可以在flex容器中堆叠图像？

以下是HTML供参考：

<div id="dealWrapper">
  <!-- HEADER START -->

  <div id="flexContainer">
    <div id="bigImage">
      <a href="/link"><img id="orgZ" src="https://i.imgur.com/1KWyDov.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="gluZ" src="https://i.imgur.com/9GHwSZR.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="sugZ" src="https://i.imgur.com/ugltt9v.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="vegZ" src="https://i.imgur.com/zi9R9yl.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="ketZ" src="https://i.imgur.com/SSd9KST.jpg" alt="Image of Food" /></a>
      <a href="/link"><img id="palZ" src="https://i.imgur.com/zs92uob.jpg" alt="Image of Food" /></a>
    </div>
    <ul class="flexUL">
      <li class="vm_clickable" id="organic" data-src="/" data-url="/">
        <a href="/link">Organic</a>
      </li>
      <li class="vm_clickable" id="glutenFree" data-src="/" data-url="/">
        <a href="/link">Gluten-Free</a>
      </li>
      <li class="vm_clickable" id="sugarFree" data-src="/" data-url="/">
        <a href="/link">Sugar-Free</a>
      </li>
      <li class="vm_clickable" id="vegan" data-src="/" data-url="/">
        <a href="/link">Vegan</a>
      </li>
      <li class="vm_clickable" id="keto" data-src="/" data-url="/">
        <a href="/link">Keto</a>
      </li>
      <li class="vm_clickable" id="paleo" data-src="/" data-url="/">
        <a href="/link">Paleo</a>
      </li>
    </ul>
  </div>
  <!-- END FLEX CONTAINER -->
</div>
<!-- deal wrapper end -->

我想将显示的图像堆叠在一起（当然z索引会变化）。这可能吗？据我所知，您必须使用position：absolute来执行此操作。似乎可以保证干扰先前设计的弯曲样式。我是否需要摆脱flex并以其他方式设置CSS定位？

代码笔供参考：https://codepen.io/gchis66/pen/qBZNgBw

编辑：对不起，如果我不清楚最终目标。最终，我想将图像堆叠在一起，然后在图像右侧的每个链接上设置css悬停规则，以通过将z索引更新为最高编号来显示相应的图像。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

flexbox html z-index