Question

基本上，正如标题所述，我希望子元素扩展到父边界。该元素仅在悬停其父元素时可见。

我不允许分享整个CSS，所以我尝试创建一个基本的jsfiddle来演示我的问题here

我们的布局类似于：

   Fixed top bar
_____________________
S  |  Scrollable body
i  |
d  |
e  |
b  |
a  |
r  |

侧边栏也是固定的。补充工具栏包含多个可滚动项目。

＆＃13;

.sidebar {
    width: 25%;
    position: fixed;
    display: flex;
    flex-direction: column;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.body {
  overflow: auto;
}

.help {
    display: inline-block;
    position: relative;
    cursor: default;
    padding-right: 10px;
    z-index: 2;
}

span:hover + .help-text {
    transition: all 0.2s 0.4s;
    display: block;
    opacity: 1;
}

.help-text {
    display: none;
    opacity: 0;
    position: absolute;
    top: -5px;
    left: 10px;
    width: 300px;
    padding: 5px;
    font-size: 12px;
    background-color: black;
    color: white;
    white-space: pre-wrap;
    border-radius: 5px;
    z-index: 1500;
}

＆＃13;

<div class="sidebar">
  <div class="sidebar-item">
    <div class="body">
      <div class="help">
        <span>hover over me</span>
        <pre class="help-text">
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
        </pre>
      </div>
      gvregrfvrtyewrfgvrtbh
      vgrewtghwrt
      frgerghrthbed
      hewrtgrhbrwwh
    </div>
  </div>
</div>

＆＃13;

我想避免使用垂直和水平滚动条，当显示帮助文本时，它应该超过父div的限制。 z-index无法正常工作。这可能吗？

修改

通过将visibility更改为display，但未显示帮助文本时能够摆脱滚动条，但是当悬停在

上时，文本仍显示在父容器中

Answer 1

你可以做的是使用固定的位置，小心这将把帮助工具提示相对于窗口，你可以使用边距来设置位置（因为默认情况下固定位置项，显示在其父级旁边），如果你使用top和left，它将把元素放在视图端口...

＆＃13;

.sidebar {
    width: 25%;
    position: fixed;
    display: flex;
    flex-direction: column;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.body {
  overflow: auto;
}

.help {
    display: inline-block;
    position: relative;
    cursor: default;
    padding-right: 10px;
    z-index: 2;
}

.help:hover .help-text {
    transition: all 0.2s 0.4s;
    visibility: visible;
    opacity: 1;
}

.help-text {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    margin-top: -5px;
    margin-left: 10px;
    width: 300px;
    padding: 5px;
    font-size: 12px;
    background-color: black;
    color: white;
    white-space: pre-wrap;
    border-radius: 5px;
}

＆＃13;

<div class="sidebar">
  <div class="sidebar-item">
    <div class="body">
      <div class="help">
        <span>hover over me</span>
        <pre class="help-text">
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
        </pre>
      </div>
      gvregrfvrtyewrfgvrtbh
      vgrewtghwrt
      frgerghrthbed
      hewrtgrhbrwwh
    </div>
  </div>
</div>

＆＃13;

Answer 2

试试这个：

我删除了text-help的宽度并将其悬停在其中以便在阅读时继续显示。

＆＃13;

.sidebar {
    width: 25%;
    position: fixed;
    display: flex;
    flex-direction: column;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.body {
  overflow: auto;
}

.help {
    display: inline-block;
    position: relative;
    cursor: default;
    padding-right: 10px;
    z-index: 2;
}

span:hover + .help-text {
    transition: all 0.2s 0.4s;
    visibility: visible;
    opacity: 1;
}
.help-text:hover {
    transition: all 0.2s 0.4s;
    visibility: visible;
    opacity: 1;
}

.help-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -5px;
    left: 10px;
    padding: 5px;
    font-size: 12px;
    background-color: black;
    color: white;
    white-space: pre-wrap;
    border-radius: 5px;
}

＆＃13;

<div class="sidebar">
  <div class="sidebar-item">
    <div class="body">
      <div class="help">
        <span>hover over me</span>
        <pre class="help-text">
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
          some test data
        </pre>
      </div>
      gvregrfvrtyewrfgvrtbh
      vgrewtghwrt
      frgerghrthbed
      hewrtgrhbrwwh
    </div>
  </div>
</div>

＆＃13;

html子元素扩展到父边界

2 个答案: