如何实现嵌套div结构并正确定位标签及箭头元素

需求说明 #

需要构建多层嵌套div结构，内层div数量由数据库返回的对象集合决定（最多5个）。目前已完成居中布局与基础亮度渐变效果，待解决问题：

• 标签（含数值、描述）的精准定位，不干扰div的居中布局
• 添加指向内层div的箭头元素

解决方案代码 #

CSS 样式

#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 400px;
  background: #DCDCDC;
  position: relative;
}

/* 通用box样式：相对定位+亮度渐变 */
.box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #DCDCDC;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
}

/* 多层亮度递进 */
.box-1 { filter: brightness(0.95); }
.box-2 { filter: brightness(0.9); }
.box-3 { filter: brightness(0.85); }
.box-4 { filter: brightness(0.8); }
.box-5 { filter: brightness(0.75); }

/* 标签容器：绝对定位到左上角 */
.label-container {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label-container .value {
  font-weight: bold;
  color: #333;
}

.label-container .desc {
  font-size: 12px;
  color: #666;
}

/* 箭头元素：指向内层div的右侧 */
.box::after {
  content: '';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #999;
}

/* 最内层div不需要箭头 */
.box:last-child::after {
  display: none;
}

HTML 结构（3层示例）

<div id="container">
  <div class="box box-1">
    <div class="label-container">
      <span class="value">Nu 100</span>
      <span class="value">Nu 100</span>
      <span class="desc">Inner div description</span>
    </div>
    <div class="box box-2">
      <div class="label-container">
        <span class="value">Nu 101</span>
        <span class="value">Nu 202</span>
        <span class="desc">Inner div longer description</span>
      </div>
      <div class="box box-3">
        <div class="label-container">
          <span class="value">Nu 303</span>
          <span class="value">Nu 404</span>
          <span class="desc">Innermost div description</span>
        </div>
      </div>
    </div>
  </div>
</div>

关键实现说明 #

1. 标签定位：

   • 给每个.box设置position: relative，作为标签的定位参考
   • 标签容器.label-container用position: absolute固定在左上角，完全不影响内部div的居中布局
   • 通过gap控制标签元素的间距，保持排版整洁

2. 箭头实现：

   • 利用CSS伪元素::after绘制三角形箭头，通过right: -20px和top: 50%定位到div右侧居中位置
   • 最内层div通过.box:last-child::after隐藏箭头，避免多余元素

3. 动态适配：

   • 如果需要根据数据库数据动态生成多层结构，可通过JS循环创建.box元素，每层的width/height用calc(100% - 50px)自动递减，亮度值也可按层级动态计算（比如0.95 - 0.05 * 层级）
   • 最多5层时，容器尺寸可调整为500x500px，保证每层有足够展示空间

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