给td内的div应用CSS：三角形被单元格边缘遮挡问题排查

我尝试把三角形定位在表格单元格的两端边缘，但三角形一半被遮挡了。设置z-index也没用，请问问题出在哪？

当前效果：

预期效果：

我的Angular代码 #

HTML代码 #

<td *ngFor="let col of getNumberRange(1, maxDuration)" style="padding: 0;">
  <div style="position: relative;">
    <div *ngIf="col == 1" class="triangle-up"></div>
    <div *ngIf="col == 1" class="start-abbreviation">START</div>
    <div *ngIf="col == 5" class="end-abbreviation">END</div>
    <div *ngIf="col == 5" class="triangle-down"></div>
    <div *ngIf="col >= 1 && col <= 5" 
      style=" height: 15px; background-color: #1f4166; padding-top: 5px"></div>
  </div>
</td>

CSS代码 #

.triangle-up {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #ff6600;
  position: absolute;
  top: 0;
  left: -5px;
  z-index: 1;
}

.start-abbreviation {
  display: inline-block;
  margin-left: 5px;
  position: absolute;
  top: 0px;
  color: white;
  left: 0;
  z-index: 99999999999;
}

.triangle-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #ff6600;
  position: relative;
  top: -13px;
}

.end-abbreviation {
  display: inline-block;
  margin-right: 5px;
  position: absolute;
  top: 0px;
  color: white;
  left: 0;
  z-index: 99999999999;
}

问题原因与解决方法 #

核心问题 #

1. 表格单元格的溢出裁剪：<td>默认会裁剪超出自身边界的内容，这是单元格的默认行为，和z-index无关，所以你设置层级也没用。
2. 元素渲染顺序与定位错误：右侧三角形用了相对定位，且蓝色背景块在HTML最后渲染，会覆盖三角形；同时左右三角形都超出了单元格边界，直接被裁剪。

具体修复步骤 #

1. 允许单元格内容溢出显示

给<td>添加overflow: visible，让超出边界的三角形能正常显示：

td {
  padding: 0;
  overflow: visible; /* 关键设置，取消裁剪 */
}

2. 修复右侧三角形的定位

把.triangle-down改成绝对定位，定位到单元格右侧外边缘，并调整层级避免被覆盖：

.triangle-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #ff6600;
  position: absolute; /* 改为绝对定位 */
  top: 5px; /* 垂直对齐蓝色块 */
  right: -5px; /* 定位到单元格右侧外边缘 */
  z-index: 1;
}

3. 调整蓝色背景块的层级

给蓝色背景块添加类并设置层级，确保它在三角形和文字下方：

.progress-bar {
  height: 15px;
  background-color: #1f4166;
  padding-top: 5px;
  z-index: 0;
  position: relative; /* z-index需要配合定位生效 */
}

同时修改HTML中的蓝色块：

<div *ngIf="col >= 1 && col <= 5" class="progress-bar"></div>

4. 修正END文字的位置

把.end-abbreviation的定位改成靠右，符合预期效果：

.end-abbreviation {
  display: inline-block;
  margin-right: 5px;
  position: absolute;
  top: 0px;
  color: white;
  right: 5px; /* 改为靠右对齐 */
  z-index: 999;
}

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