如何在flex子项内定位option_icon，使其固定在缩略图右下角？

我的DOM结构如下：

<div id="content">
  <div class="listitem">
    <img class="thumbnail"/>
    <div class="option_icon"></div>
  </div>
  <div class="listitem">
    <img class="thumbnail"/>
    <div class="option_icon"></div>
  </div>
</div>

CSS代码如下：

#content {
  position: absolute;
  overflow: auto;
  width: 100vw;
  top: var(--header-height);
  left:0;
  bottom: var(--footer-height);
  display: flex;
  flex-direction: row;
  place-content: start;
}

.listitem {
  width: var(--image-size);
  height: var(--image-size);
  display: flex;
  flex-direction: row;
}

.thumbnail {
  align-self: flex-start;
  height: var(--image-size);
  width: var(--image-size);
}

.option_icon {
  height: calc(var(--icon-size)*0.75);
  width: calc(var(--icon-size)*0.75);
  background-color: grey;
  mask-image: url("icons/options.svg");
  position: absolute;
  align-self: flex-end;
  z-index: 999;
}

我想要实现的效果是让option_icon固定在每一张thumbnail图片的右下角（类似画廊视图，每张方形图片的右下角都有一个操作图标）。目前第一列的图标显示正常，但由于option_icon采用绝对定位，不受listitem的flex布局影响，所有图标都堆叠在第一列，而非随对应子项排列。

解决方案 #

问题核心是绝对定位的参考对象错误：绝对定位元素默认会相对于最近的已定位祖先元素（position值不为static的元素）定位，你的.listitem没有设置定位，所以所有.option_icon都会以最外层的#content为基准，导致堆叠。

只需修改两处CSS即可解决：

.listitem {
  width: var(--image-size);
  height: var(--image-size);
  display: flex;
  flex-direction: row;
  position: relative; /* 添加这行，为内部绝对定位元素提供定位上下文 */
}

.option_icon {
  height: calc(var(--icon-size)*0.75);
  width: calc(var(--icon-size)*0.75);
  background-color: grey;
  mask-image: url("icons/options.svg");
  position: absolute;
  bottom: 8px; /* 调整到容器底部，数值可按需修改 */
  right: 8px; /* 调整到容器右侧，数值可按需修改 */
  z-index: 999;
  /* 移除align-self: flex-end，绝对定位已脱离flex流 */
}

修改后，每个.option_icon会以对应的.listitem为定位基准，固定在其右下角，不会再出现堆叠问题。

内容的提问来源于stack exchange，提问作者Franz