首页猿问如何让孩子出现在表格tr内的父母之上？

如何让孩子出现在表格tr内的父母之上？

JavaScript

长风秋雁 2022-05-14 14:49:51

我在左侧菜单中有一个带有滚动条的表格，并且表格中的每一行都有一个工具提示。我的要求是在滚动条顶部向右显示工具提示，但有些我无法实现。问题是出现在滚动条和正文后面的工具提示。我需要将它显示在向右滚动条的顶部。我有父 Div 的“相对”位置和子元素的“绝对”位置。Z-index 似乎也在这里不起作用。HTML：<div class="ResultsWrapper"> <table class="ResultsTable"> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815206</div> <div class="SerialNumberTooltip">3119985815206</div> </div> </td> </tr> </table></div>CSS：.SerialNumberContainer { position: relative; z-index: 10;}.SerialNumberTooltip { position: absolute; top: 10px; left: 40px; background-color: #FFF; border: 1px solid #CCC; display: none;}.SerialNumberContainer:hover { z-index: 20;}.SerialNumberContainer:hover .SerialNumberTooltip { display: block; z-index: 40;}

查看完整描述

3 回答

慕田峪9158850

TA贡献1794条经验获得超7个赞

这是解决方法： 1. 更改 html 结构：

<div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>

使用伪元素来定位 div 的属性。（在css之前添加）
删除位置：工具提示所依赖的相对位置。
移除了 top 和 left 属性，因为它们依赖于 position relative 并替换为 margin 。

下面是固定代码：

.ResultsWrapper {

width:150px;

height:314px;

text-align:center;

overflow-x:hidden;

overflow-y:scroll;

border:1px solid black;

}

.ResultsTable {

width:86px;

border-collapse:collapse;

table-layout:fixed;

}

.ResultsTable th, .ResultsTable td {

border:1px solid black;

text-overflow:ellipsis;

}

.ColumnSerialNo {

width:81px;

}

.SerialNumberContainer {

z-index: 10;

}

.SerialNumber {

width: 80px;

overflow: hidden;

}

.SerialNumber:hover::before {

position: absolute;

content:attr(data-before-content);

margin:10px 0 0 50px;

background-color: #fff;

border: 1px solid #CCC;

display: block;

z-index:9999;

}

.SerialNumber:hover{}

<thead>

<tr>

<th class="ColumnSerialNo">Serial Number</th>

</tr>

</thead>

<tbody>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr><tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

</tbody>

</table>

</div>

反对回复 2022-05-14

慕森卡

TA贡献1806条经验获得超8个赞

您不能使用 Position absolute 和 z-index 将元素定位在滚动条上。如果要在滚动条顶部显示元素，则需要使用位置固定元素。

.ResultsWrapper {

width:150px;

height:314px;

text-align:center;

overflow-y:scroll;

border:1px solid black;

z-index:-1;

}

.ResultsTable {

width:86px;

border-collapse:collapse;

table-layout:fixed;

}

.ResultsTable th, .ResultsTable td {

border:1px solid black;

text-overflow:ellipsis;

}

.ColumnSerialNo {

width:81px;

}

.SerialNumberContainer {

position: relative;

z-index: 10;

}

.SerialNumber {

width: 80px;

overflow: hidden;

}

.SerialNumberTooltip {

position: fixed;

top: 10px;

left: 70px;

background-color: #FFF;

border: 1px solid #CCC;

display: none;

z-index:99999999999;

}

.SerialNumberContainer:hover {

z-index: 20;

}

.SerialNumberContainer:hover .SerialNumberTooltip {

display: block;

z-index: 40;

}

<thead>

<tr>

<th class="ColumnSerialNo">Serial Number</th>

</tr>

</thead>

<tbody>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

</tbody>

</table>

</div>

检查下面的jsfiddle。

http://jsfiddle.net/rajeevRF/eoc8yv5a/5/

反对回复 2022-05-14

繁花不似锦

TA贡献1851条经验获得超4个赞

我认为您可以使用包装类（ HTML 中的.TooltipWrapper），如下所示：

document.querySelectorAll('.SerialNumber').forEach(function(el){

el.addEventListener('mousemove',function(ele){

var x = ele.pageY;

el.parentNode.querySelector('.TooltipWrapper').style.top = `${x}px`;

});

.ResultsWrapper {

width:150px;

height:314px;

text-align:center;

overflow-x:hidden;

overflow-y:scroll;

border:1px solid black;

}

.ResultsTable {

width:86px;

border-collapse:collapse;

table-layout:fixed;

}

.ResultsTable th, .ResultsTable td {

border:1px solid black;

}

.ColumnSerialNo {

width:81px;

}

.SerialNumber {

width: 80px;

overflow: hidden;

}

.TooltipWrapper {

position: absolute;

visibility: hidden;

}

.hasTooltip:hover .TooltipWrapper {

visibility: visible;

opacity: 1;

}

.SerialNumberTooltip {

display: block;

--margin-top: -20px;

margin-left: 85px;

background-color: #FFF;

border: 1px solid #CCC;

}

<thead>

<tr>

<th class="ColumnSerialNo">Serial Number</th>

</tr>

</thead>

<tbody>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

</div>

</td>

</tr>

</tbody>

</table>

</div>

反对回复 2022-05-14

3 回答
0 关注
90 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

如何让孩子出现在表格tr内的父母之上？

如何让孩子出现在表格tr内的父母之上？

3 回答

添加回答