CSS:网格、滚动条和工具提示问题

Question

我一直在为我将在此处描述的 CSS 问题而烦恼:

在下面的示例 ( https://codesandbox.io/s/jjq4km89y5 ) 中，您可以看到一个可滚动的内容(紫色背景)和一个被左侧面板半隐藏的“工具提示”(出于实际原因，在此示例中始终显示为红色背景) .

我需要的是让紫色内容可滚动，并显示红色工具提示:

CSS使用的是CSS Grid，但是如果我改用flex也是一样的问题。

问题似乎出在 overflow: auto 语句上，(代码沙箱中 styles.css 的第 59 行)。

谢谢!!

(要查看实时示例，请转至 https://codesandbox.io/s/jjq4km89y5)

代码，否则，可以在这里看到:

<div class="page">
  <div class="menu">Menu</div>
  <div class="content">
    <div class="grid">
      <div class="nav">Top Nav</div>
      <div class="panel">Left Panel</div>
      <div class="analysis">
        <div>
          <p>Some random content</p>
          <div class="tooltip-trigger">
            A div with a Tooltip (always showing here)
            <div class="tooltip">
              You should be able to see the entirety of this text here,
              going over the Left Nav
            </div>
          </div>
          <div class="long-content">
            Some very long content that should make the purple div scroll
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

还有 CSS:

.page {
  display: flex;
  margin: 0;
  height: 100%;
  width: 100%;
  position: fixed;
}

.menu {
  width: 40px;
  background-color: orange;
  height: 100%;
}

.content {
  flex: 1;
}

.grid {
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  height: 100%;
}

.nav {
  grid-area: nav;
  padding: 10px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: grey;
  border-bottom: 3px solid black;
}

.panel {
  grid-area: panel;
  border-right: solid 3px black;
  background-color: grey;
}

.panel > div {
  height: calc(100vh - 60px);
}

.analysis {
  grid-area: analysis;
  padding: 60px;
  height: calc(100vh - 60px);
  background-color: purple;

  /* The problem is here: 
    if set to "auto", then we have a scrollbar but the red tooltip is not visible
    If set to "visible", we get the red tooltip but the scroll is gone
  */
  overflow: auto;
}

.tooltip-trigger {
  position: relative;
  background-color: green;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  position: absolute;
  border: 5px dashed orange;
  background-color: red;
  height: 200px;
  width: 200px;
  top: 10px;
  left: -200px;
}

.long-content {
  height: 3000px;
  background-color: pink;
  border: 5px dashed darkred;
}

您还可以看到真实世界的应用程序及其作用:

如您所见，工具提示将针对表格中的所有这些单元格显示，并且需要精确地附加到该单元格。

表格所在的内容也需要可滚动。

Answer 1

这可能是一个解决方案，或者只是朝着正确方向的插入。

工具提示不是相对于父元素绝对定位，而是相对于更远的祖先元素，因此它不受紫色 div 溢出的影响。

所以，而不是这个:

.grid {
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  height: 100%;
}

.tooltip-trigger {
  position: relative;
  background-color: green;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  position: absolute;
  border: 5px dashed orange;
  background-color: red;
  height: 200px;
  width: 200px;
  top: 10px;
  left: -200px;
}

按照这些思路尝试一些事情:

.grid {
  position: relative; /* new */
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  height: 100%;
  position: relative;
}

.tooltip-trigger {
  /* position: relative; */
  background-color: green;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  position: absolute;
  border: 5px dashed orange;
  background-color: red;
  height: 200px;
  width: 200px;
  top: 200px;   /* adjusted */
  left: 60px;   /* adjusted */
}

revised demo