Question

我遇到了一个CSS堆叠上下文问题，我将其简化为以下简单案例。

一个简单的表如下面的代码，我翻译了标题以实现滚动效果，而标题总是由那些翻译过的td单元格覆盖。

我已阅读多篇文章，包括着名的文章"What No One Told You About Z-Index"，并尝试在{{1}上添加翻译和 z-index css属性}和thead，我＆＃39;猜测＆＃39; 它们应该在相同的堆叠环境中，所以 z-index 会起作用，而我失败，由tbody引起的失败是否对堆叠上下文有一些特殊限制？我现在能找到的唯一解决方案是在table标记之后添加thead，在html中切换tbody和thead位置。

完整案例为here。

＆＃13;

tbody

＆＃13;

.m-table {
  width: 40%;
  font-size: 14px;
  text-align: center;
  border: 1px solid #e6eaf9;
  background: #fafbff;
  transform: translateY(0);
}

.m-table th,
.m-table td {
  padding: 16px;
  border: 1px solid #ddd;
  background: #effff0;
}

.m-table th {
  background: #e6eaf9;
}

.m-table thead {
  transform: translateY(25px);
  margin-bottom: 10px;
}

td label.u-angle {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #79c5ff;
  transform: rotate(45deg);
}

＆＃13;

在表格元素（头部和身体）上堆叠上下文

0 个答案: