Question

我使用hover在css表数据上显示了动态生成的弹出窗口。

弹出窗口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？）

如果弹出div的位置设置为相对，则表行大小增加

2 个答案: