我有一个表，其中包含一个粘性第一列，然后是一些包含input字段的附加列。每个字段都有一种浮动工具栏，当输入元素具有焦点时应该出现该工具栏。它看起来大致是这样的：
let elements = document.getElementsByClassName('toolbar');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
alert('clicked');
});
}td {
position: relative;
}
.sticky {
position: sticky;
left: 0;
background-color: white;
z-index: 1;
white-space: nowrap
}
.toolbar {
position: absolute;
top: 0;
left: -20px;
width: 20px;
height: 20px;
opacity: 0;
background-color: red;
}
input:focus+.toolbar {
opacity: 1;
z-index: 2;
cursor: pointer;
}<table>
<tr>
<td class="sticky">Lorem Ipsum</td>
<td>
<input>
<div class="toolbar"></div>
</td>
<td>
<input>
<div class="toolbar"></div>
</td>
<td>
<input>
<div class="toolbar"></div>
</td>
</tr>
</table>（我不能 100% 确定我是否将它直接插入到此片段功能中，如果它不起作用，只需将其保存到本地文件并在那里运行）
如您所见，浮动工具栏元素的显示/隐藏按预期工作。当字段具有焦点时，它会显示在预期位置的所有列。现在这是我不明白的事情：工具栏的点击监听器适用于所有列，除了第一个（即粘性列旁边的那个）。当我单击那个时，工具栏就消失了（因为输入失去了焦点），但是单击侦听器没有运行。
当我z-index从第一列中删除时，问题就消失了，但我不能，因为它需要有粘性才能正常工作。另外，如果这只是一个 z-index 问题，工具栏不应该在 sticky 下方td吗？
似乎发生的事情是：
inputinput原因.toolbar的关注.sticky我已经在 FF 和 Chrome 中复制了这个，但我不明白这是某种浏览器错误，还是我对事件模型的理解不够好。有没有人有一些见解或相关文档的链接？
将 z-index: 2 添加到 .toolbar ，它将被修复。
目前其他点击有效，因为其他列没有 z-index。当您将 z-index: 1 添加到列时，结果是该列显示在工具栏上。现在，由于您无法删除该 z-index，因此有意义的是为您希望在列顶部显示的内容（在本例中为工具栏）提供增加的 z-index。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句