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

编程问答 2022-08-16

问题描述

我有一个当前正在重构的项目，想知道是否可以在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索引更新为最高编号来显示相应的图像。

解决方法

尝试以下

#flexContainer a{
display: block;
}

#flexContainer a img{
width: 100%;
height: auto;
max-width: 100%;
object-fit: cover;
}
,

摆脱display: flex;中的#bigImage a-只有容器需要它。

将position: absolute添加到#bigImage a。

然后，将id添加到链接。因此，例如，您可以这样做：

#veganlink:hover + #veganimage {
z-index: 1000;
}

这可能会帮助您：On a CSS hover event,can I change another div's styling?

,

您可以使用position：absolute + target：

body {
  max-width: 1280px;
}

#flexContainer {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: nowrap;
  margin: .5vw auto 1vw;
}

#bigImage a {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

#bigImage {
  position: relative;
}

#bigImage>a+a {
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
}

#bigImage img:target {
  position: relative;
  z-index: 1
}

#orgZ {}

#gluZ {}

#sugZ {}

#vegZ {}

#ketZ {}

#palZ {}

#bigImage {
  width: 75%;
}

.flexUL {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 25%;
}

.flexUL>li {
  height: 100%;
  width: 100%;
  max-width: 320px;
  max-height: 100px;
}

.flexUL>li>a {
  color: white;
  font-size: 2vw;
  margin: auto;
}

.flexUL>li:hover>a:after {
  content: "\203A";
  font: 300 36px/18px "Roboto Slab";
  margin-left: 0.2em;
  height: 24px;
  vertical-align: middle;
  display: inline-block;
  color: white;
}

#organic {
  background-color: #ccb3d1;
}

#organic:hover {
  background-color: #b7a1bc;
}

#glutenFree {
  background-color: #e7b020;
}

#glutenFree:hover {
  background-color: #cf9d1c;
}

#sugarFree {
  background-color: #f07f53;
}

#sugarFree:hover {
  background-color: #d8724a;
}

#vegan {
  background-color: #889a2c;
}

#vegan:hover {
  background-color: #7a8a27;
}

#keto {
  background-color: #f49382;
}

#keto:hover {
  background-color: #db8475;
}

#paleo {
  background-color: #9e5860;
}

#paleo:hover {
  background-color: #8e4f56;
}
<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="#orgZ">Organic</a>
      </li>
      <li class="vm_clickable" id="glutenFree" data-src="/" data-url="/">
        <a href="#gluZ">Gluten-Free</a>
      </li>
      <li class="vm_clickable" id="sugarFree" data-src="/" data-url="/">
        <a href="#sugZ">Sugar-Free</a>
      </li>
      <li class="vm_clickable" id="vegan" data-src="/" data-url="/">
        <a href="#vegZ">Vegan</a>
      </li>
      <li class="vm_clickable" id="keto" data-src="/" data-url="/">
        <a href="#ketZ">Keto</a>
      </li>
      <li class="vm_clickable" id="paleo" data-src="/" data-url="/">
        <a href="#palZ">Paleo</a>
      </li>
    </ul>
  </div>
  <!-- END FLEX CONTAINER -->
</div>
<!-- deal wrapper end -->

Pen Demo

flexboxflexboxhtmlz-index