Make specific div or any element display on top of all others

Question

I have the following tooltip:

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

And so far It is working almost perfectly to what I intend to... Except for one thing: The tooltip (span) doesn't show on the top of all other elements of the page, instead shows behind it. Checkout the snippet above.

UPDATE:

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

Any ideas?

Answer 1

First I wanted to thank all who came here and tried to help me! So I found the solution and I'm posting the whole snippet below.

Note that the changes were only in the CSS:

a.tditems_tooltip span > table {
  position: fixed;
  transform: translateY(-100%);
}

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