显示 DIV 内的元素，并在所有其他元素之上显示 overflow-y

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) 没有显示在页面所有其他元素的顶部，而是显示在它后面。查看上面的代码段。

NOTE: When I remove from the CSS the overflow-x and overflow-y from the td it shows the way intended, but I still need to specify a max-height to that td...

有什么想法吗？

Answer 1

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

为包含工具提示的 table 分配固定定位似乎迫使该元素超出其父元素的溢出属性，但随后在绝对定位的 span 元素中以不同方式定位自身，因此我应用了 transform: translateY(-100%); 使其适用于您的示例。您可能需要重新设计这些元素的布局以使其按您希望的方式工作。（顺便说一句，我添加的样式在a.tditems_tooltip span > table下）

#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%);
}

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

显示 DIV 内的元素，并在所有其他元素之上显示 overflow-y

Show element inside a DIV with overflow-y on top of all others

html

css

z-index

overflow