css - 在表格单元格的链接下添加带有 bgcolor 的跨度

Question

我正在尝试向表格单元格添加一个简单的栏，例如着色。

样本 JSBIN

HTML

 <table class="table table-bordered"> 
    <tr> 
        <td class="cell-bar">
            <span class="bar" style="width:10%"></span>
            <a href="">clickable - half covered</a> 
        </td>
    </tr>
 </table>

CSS

.cell-bar { 
  position:relative;
}
.cell-bar * {
  z-index : 2;
}
.cell-bar>.bar { 
  position: absolute;
  top : 0;
  left : 0;
  bottom : 0;
  border-right : 2px solid rgba(0,0,0,0.05);
  background-color : rgba(255, 165, 0, 0.1);
  z-index : 1;
}

我已将条形跨度的 z-index 设置为 1，将所有其他子项设置为 2 - 但跨度覆盖了链接，使其无法点击 - 有什么办法解决这个问题吗？

Answer 1

z-index 对非定位元素没有影响(即默认的 position: static)

你需要给这个 block 添加一个位置:

.cell-bar * {
    z-index: 2;
    position: relative;
}

DEMO