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

【问题标题】：How to make child appear on top of the parent inside the table tr?如何让孩子出现在表格tr内的父母之上？
【发布时间】：2020-03-11 05:10:30
【问题描述】：

我在左侧菜单中有一个带有滚动条的表格，并且我在表格中的每一行都有一个工具提示。我的要求是在 Scrollbar 的 Top 上向右显示 Tooltip，但有些我无法实现。

问题是工具提示出现在滚动条和正文后面。我需要将它显示在向右滚动条的顶部。

我有一个位置“相对”用于父 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;
}

请检查下面的小提琴。

Full Example In Fiddle

感谢您的帮助。

【问题讨论】：

我认为这种结构不可能，只有纯css
试试这个.SerialNumberTooltip { position: absolute; top: -22px; left: 0; background-color: #FFF; border: 1px solid #CCC; display: none; }
嗨，Awais，建议的代码不起作用。我需要在向右的滚动条顶部显示工具提示。谢谢
嗨，Batu.khan，如果有其他选择，请提出建议

标签： javascript html css

【解决方案1】：

我认为您可以像以下方式使用包装器 class（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;
}

<div class="ResultsWrapper">
  <table class="ResultsTable">
    <thead>
      <tr>
        <th class="ColumnSerialNo">Serial Number</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815206</div>
            <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815206</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815207</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815207</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815208</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815208</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815209</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815209</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815210</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815210</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815211</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815211</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815212</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815212</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815213</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815213</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815214</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815214</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815215</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815215</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815216</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815216</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815217</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815217</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815218</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815218</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815219</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815219</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815220</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815220</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815221</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815221</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815222</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815222</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815223</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815223</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815224</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815224</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815225</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815225</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="hasTooltip">
          <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815226</div>
             <div class="TooltipWrapper">
              <div class="SerialNumberTooltip">3119985815226</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

嗨 Mamun，我的要求是显示，工具提示在滚动条顶部向右，请帮助。
这很好但是当我们移动滚动条时，工具提示与行无关。我的意思是，工具提示不会随着表格行移动。谢谢。

【解决方案2】：

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

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

使用伪元素来定位 div 的属性。（在 css 之后添加之前）
移除位置：工具提示所依赖的相对位置。
移除了 top 和 left 属性，因为它们依赖于相对位置并替换为 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{}

<div class="ResultsWrapper">
    <table class="ResultsTable">
        <thead>
            <tr>
                <th class="ColumnSerialNo">Serial Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="aaaaaaa3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr><tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber" data-before-content="3119985815206">3119985815206</div>
                    </div>
                </td>
            </tr>
            
        </tbody>
    </table>
</div>

【讨论】：

嗨 Sahil Dhir，解决方案很好，但是如果我们移动菜单滚动条，工具提示不会随着表格行移动。工具提示应与相应的行保持一致。
根据用户体验，当我们滚动框中的任何内容时，控件会转到滚动而不是鼠标的当前位置，并且还要检查用户需要将鼠标放在其上的特定行看。不推荐滚动+更改工具提示..
正确。无论如何，我正在尝试动态地为工具提示提供 x 和 y 位置。因此该工具提示可以采用容器的高度和宽度。
如果你愿意使用 javascript 这将是最好的方法，无论如何如果你想使用 css 这将是正确的方法。如果喜欢，请点赞并接受我的回答。

【解决方案3】：

您不能使用 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;
}

<div class="ResultsWrapper">
    <table class="ResultsTable">
        <thead>
            <tr>
                <th class="ColumnSerialNo">Serial Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="hasTooltip">
                    <div class="SerialNumberContainer">
                        <div class="SerialNumber">3119985815206</div>
                        <div class="SerialNumberTooltip">3119985815206</div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

检查下面的jsfiddle。

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

【讨论】：

感谢 Rajeev，但我需要在每行旁边显示工具提示，而不是在固定位置。我们有什么选择吗？请帮忙。
对不起。我不认为这是可以实现的。