Question

我有以下工具提示：

#left_div {
  max-height:170px;
  overflow-x:hidden;
  overflow-y:scroll;
}
a.tditems_tooltip {
  position: relative;
  display: inline-block;
  text-decoration:none;
}
a.tditems_tooltip span {
  position: absolute;
  max-width:400px;
  color:#FFFFFF;
  line-height:16px;
  padding:0;
  background:url('/layouts/background.gif');
  border: 1px solid #CFB57C;
  text-align: center;
  display: none;
  text-decoration:none;
  font-size: 12px;
  box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0%;
  margin-left: 150px;
  max-width:800px;
  text-decoration:none;
}
a:hover.tditems_tooltip span {
  display: inline-block;
  bottom: 100%;
  left: 0%;
  margin-left: -3px;
  z-index: 1000;
  text-decoration:none;
}

<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">
  <tr>
    <td width="50%">
      <div id="left_div">
        </br>
        </br>
        </br>
        </br>
        <a class="tditems_tooltip">
          <font color="red">TRIGGER</font>
          <span>
            <table border="0" cellspacing="0" cellpadding="1" width="300">
              <tr bgcolor="green">
                  <td>CONTENT OF TOOLTIP</td>
              </tr>
            </table>
          </span>
        </a>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
      </div>
    </td>
    <td width="50%">INSIGNIFICANT CONTENT</td>
  </tr>
</table>

到目前为止它几乎完全符合我的意图......除了一件事：工具提示（span）没有显示在页面的所有其他元素的顶部，而是显示在它背后。查看上面的代码段。

注意：当我从 CSS 中移除overflow-x和overflow-y td时，它显示了预期的方式，但我仍然需要为max-height ...
指定td

有什么想法吗？

Answer 1

将position: fixed;添加到子元素会将其从DOM中该元素父项的流中删除，因此子元素将忽略父元素的任何overflow属性。

为包含工具提示的表分配固定位置似乎强制该元素超出其父级的溢出属性，但随后在绝对定位的span元素中以不同方式定位，因此我应用了{{1}使它适用于你的例子。您可能需要重新设计这些元素的布局，以使其按照您的要求运行。（顺便说一下，我添加的样式位于transform: translateY(-100%);）

＆＃13;

a.tditems_tooltip span > table

＆＃13;

#left_div {
  max-height:170px;
  overflow-x:hidden;
  overflow-y:scroll;
}
a.tditems_tooltip {
  position: relative;
  display: inline-block;
  text-decoration:none;
}
a.tditems_tooltip span {
  position: absolute;
  max-width:400px;
  color:#FFFFFF;
  line-height:16px;
  padding:0;
  background:url('/layouts/background.gif');
  border: 1px solid #CFB57C;
  text-align: center;
  display: none;
  text-decoration:none;
  font-size: 12px;
  box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0%;
  margin-left: 150px;
  max-width:800px;
  text-decoration:none;
}
a:hover.tditems_tooltip span {
  display: inline-block;
  bottom: 100%;
  left: 0%;
  margin-left: -3px;
  z-index: 1000;
  text-decoration:none;
}
a.tditems_tooltip span > table {
  position: fixed;
  transform: translateY(-100%);
}

＆＃13;

在DIV中显示元素，溢出y在所有其他元素之上

1 个答案: