html - 如何仅垂直定位绝对div？

Question

我有一个 flex-row 元素(例如两行用 flex-wrapped )。当我单击这些元素之一时，应该直接在该元素下打开一个弹出窗口(绿色框)(这就是我需要绝对定位的原因)并且这些弹出窗口都应该具有相同的宽度(与单击哪个元素无关)。
问题是因为这个绝对定位的 div 刚好在被点击的元素下面开始，这个弹出窗口的起点也在 x 轴上变化。但我希望所有的弹出窗口都水平地从同一点开始。
https://jsfiddle.net/h8f73Lpm/24/
这是我目前拥有的:

当我单击第一行中的元素时，这就是我想要实现的目标:

.. 当我点击第二行的一个元素时:

这是我的情况的简化版本。由于我们还必须考虑响应性，因此实际的行数和元素数会有所不同。我更喜欢仅使用 css 的解决方案。

.flexlist {
  display: flex;
  flex-wrap: wrap;
  max-width: 700px;
}

.entry {
  position: relative;
  min-width: 96px;
  height: 100px;
  border: 1px solid red;
  margin: 1px;
}

.selected {
  background: red;
}

.absolute {
  position: absolute;
  left: 0;
  top: 100%;
  width: 300px;
  background: green;
  z-index: 1;
  height: 80px;
}

<div class="flexlist">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry selected">
    <div class="absolute"></div>
  </div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

Answer 1

should be opened directly under this element (that's why I need an absolute positioning)

无需 position:absolute即可实现
这是一个使用 CSS 网格的想法，您可以在其中添加弹出元素后选择一个不在其中的元素:

.flexlist {
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  grid-auto-flow:dense; /* this is important for the trick and will give the correct placement */
  max-width: 700px;
  margin:20px;
}

.entry {
  height: 100px;
  border: 1px solid red;
  margin: 1px;
}

.selected {
  background: red;
}

.pop-up {
  z-index:2;
  grid-column:1/-1; /* full width */
  height: 0; /* take 0 height similar to position:absolute */
}
.pop-up > div {
  background: rgba(0,128,0,0.8);
  height:80px;
}

<div class="flexlist">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry selected"></div>
    <div class="pop-up">
      <div></div>
    </div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

<div class="flexlist">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry "></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry selected"></div>
    <div class="pop-up">
      <div></div>
    </div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>

<div class="flexlist">
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry "></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry selected"></div>
    <div class="pop-up">
      <div></div>
    </div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
  <div class="entry"></div>
</div>