Question

我正在尝试为表格单元格添加一个简单的条状颜色。

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）

您需要在此块中添加一个位置：

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

DEMO

Answer 2

试试这个

.cell-bar { 
  position:relative;
}
.cell-bar * {
  z-index : 2;
  position: relative;
}
.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;
}

<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>

我认为您错过了position .cell-bar *

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

2 个答案: