如果彈出div的位置設置為相對，則表行大小增加

Question

我已經展示了使用css在表數據hover時動態生成的彈出窗口。

當彈出窗口的position fixed或absolute它可以正常工作，但是如果position設置為relative則表數據高度會增加。

以下是使用的HTML和CSS：

的CSS

.dropv, .dropv ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropv a {
  display:inline;
  width: 185px;
}

.dropv li {
  float: left;
  padding: 0px 8px 2px 0px;
}

/* all list items */
.dropv li ul {
  position: fixed;
  background-color: lightyellow;
  padding: 0px 0px 0px 4px;
  width: 185px;
  left: -9999px;
}

/* second-level lists */
.dropv li:hover ul {
  left: auto;
}

/* nest list under hovered list items */
.dropv li ul li a {
  color: blue;
  text-decoration: none;
  display: block;
}

.dropv li ul li a:hover {
  position: relative;
  text-decoration: underline;
}

的HTML

<td id="' + frameoperationtooltip.concat(framecol) + '" style="display:table-row;">
      <div class="dataheight">
        <ul class="dropv">
          <li>' + operation + '<ul><li>Message Recieved(Bytes):' + writtenBytes + '</li>
            <li>No. Of Streams:' + readBytes + '</li>
            <li>Message Sent(Bytes):' + nbStreams + '</li>
            <li>Size of Streams(Bytes):' + sizeOfStreams + '</li>
            <li>Elapsed Time(ms):' + elapsedTime + '</li>
            <li><a href="javascript:OpenFileInPopup(&quot;' + request + '&quot;,&quot;' + preframerow + '&quot;);">Request</a>
            <li><a href="javascript:OpenFileInPopup(&quot;' + response + '&quot;,&quot;' + preframerow + '&quot;);">Response</a>
            <li><a href="javascript:OpenFileInPopup(&quot;' + callStack + '&quot;,&quot;' + preframerow + '&quot;);">CallStack</a>
            </li></ul></li>
        </ul>
      </div>
    </td>  

fixed position問題是我的表有很多行，對於需要向下滾動的行，彈出窗口不在頁面內， relative它增加了行高。

Answer 1

嘗試這個

table {
 table-layout: fixed;
} 

Answer 2

如果您想要屏幕中央（也在滾動時）：

.dropv {
  position: fixed;
  background-color: lightyellow;
  width: 50px;
  height:50px;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin:auto;
}

（您的固定元素還剩下-99999嗎？）