小编end*_*cer的帖子

如何仅垂直定位绝对div？

我有一个 flex-row 元素（例如两条带 flex-wrapped 的行）。当我单击这些元素之一时，应该直接在该元素下打开一个弹出窗口（绿色框）（这就是我需要绝对定位的原因）并且这些弹出窗口都应该具有相同的宽度（与单击哪个元素无关）。

问题是因为这个绝对定位的 div 刚好在被点击的元素下面开始，这个弹出窗口的起点也在 x 轴上变化。但我希望所有的弹出窗口都水平地从同一点开始。

这是我目前拥有的：

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

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

这是我的情况的简化版本。由于我们还必须考虑响应性，因此实际的行数和元素数会有所不同。我更喜欢仅使用 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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css

end*_*cer

2021 06-07

5
推荐指数

1
解决办法

142
查看次数

标签统计

css ×1

html ×1

如何仅垂直定位绝对div？

标签 统计

小编end_cer的帖子

标签统计