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

Answer 2

这可能是个小技巧，但我认为可以使其运作而不会产生太差的副作用：您可以将left panel和analysis布置为兄弟DOM节点，而不必analysis内部和上方的left panel层。通过一些调整来调整内容的位置，您可以使其看起来像是并排的。不用滚动analysis，而是使用静态left panel，您可以滚动left panel并使left panel的内容绝对定位。

我做了一个快速而肮脏的实现来演示其机制：

Revised code example

标记：

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

CSS：

.panel {
  grid-area: panel;
  border-right: solid 3px black;
  background-color: gray;
  display: flex;
  justify-content: space-between;
  overflow: auto;
}

.panelSpacer {
  width: 210px;
  position: relative;
  top: 0;
}

.panelContent {
  width: 210px;
  position: absolute;
  top: 60px;
}

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

.analysis {
  position: relative;
  width: calc(100% - 210px);
  padding: 60px;
  height: 100%;
  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
  */
}

CSS：网格，滚动条和工具提示问题

2 个答案: