Div内Span元素定位问题：如何将减号图标定位到指定左上角位置

嘿，折腾了一天肯定挺闹心的，别着急，我帮你搞定这个定位问题！

你之前尝试用absolute定位图标但没达到预期，核心原因是没有给父容器.left-bar-sm-nested设置相对定位——绝对定位的元素会相对于最近的带有position: relative/absolute/fixed的祖先元素定位，如果父元素没有定位，它就会往上找，直到找到有定位的元素（甚至是整个文档），这就是为啥图标跑到容器顶部角落了。

下面是可行的实现方案：

修改后的代码 #

HTML代码 #

<div class="left-bar-sm">
  <div class="left-bar-sm-header"> Quantity (0) </div>
  <div class="left-bar-sm-body">
    <div class="left-bar-sm-nested">
      <!-- 把图标span移到最前面，方便定位控制 -->
      <span class="nested-actions"><i class="fas fa-minus-circle"></i> <i class="fas fa-trash"></i></span>
      <span>Samaposha</span>
      <br>
      <span>2 x Rs 28.00 = Rs 56.00</span>
    </div>
  </div>
</div>

CSS代码 #

.left-bar-sm-header {
  background-color: #333333;
  width: auto;
  height: 50px;
  margin-top: 5px;
  border: 1px solid #595E57;
  text-align: center;
  padding: 5px;
  font-size: 18px;
  overflow-x: auto;
}
.left-bar-sm-body {
  height: 450px;
  border: none;
  border-bottom: 2px dashed #595E57;
  overflow-x: auto;
}
.left-bar-sm-nested {
  margin-top: 5px;
  background-color: #333333;
  border: 1px solid #595E57;
  padding: 20px;
  /* 关键：给父容器设置相对定位，作为绝对定位元素的参考基准 */
  position: relative;
  /* 调整左内边距，给图标留出空间，避免文字被盖住 */
  padding-left: 35px;
}
/* 图标容器的定位样式 */
.nested-actions {
  position: absolute;
  /* 定位到父容器的左上角，可根据需求微调数值 */
  top: 10px;
  left: 10px;
}

关键改动说明 #

• 给.left-bar-sm-nested添加position: relative：让里面的绝对定位元素以这个容器为参考原点，不会乱跑。
• 给图标span添加独立类名.nested-actions并设置position: absolute，通过top和left精准调整到你想要的左上角位置。
• 调整.left-bar-sm-nested的padding-left：避免文字内容和图标重叠，保证整体布局的可读性。

你可以根据实际视觉需求，微调top、left和padding-left的数值，直到完全匹配你想要的效果~

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