绝对定位的子级位于父级内部，可以滚动

Question

我正在尝试创建一个侧面导航栏，其中包含多个带有工具提示的链接，当用户将鼠标悬停在链接上时，这些工具提示会平滑地出现在侧面导航栏之外。

出现此问题的原因是侧面导航栏包含多个部分并且具有垂直滚动条。由于“overflow-y:scroll”属性，我无法将工具提示放置在侧边栏之外。

尽管存在垂直滚动，如何确保工具提示显示在侧边栏之外？

我创建了一个 CodePen 来演示所需的结果，无需滚动：https://codepen.io/Hecalim/pen/VwRwLJa

但是这是 HTML（乘以 li 以获得多个链接）

* {
  padding: 0;
  margin: 0;
}

section {
  position: fixed;
  top: 40px;
  left: 0;
  z-index: 1;
  background: white;
  box-shadow: 0 .2rem .2rem 0 rgb(150 150 150);
  font-family: Roboto, Arial, sans-serif;
  // ADD THIS TO SEE THE PROBLEM
  //overflow-y: auto;
  // height: 150px;
}

ul {
  width: fit-content;
  padding: .4rem 0 .4rem .4rem;
  list-style: none;
  display: flex;
  flex-flow: column nowrap;
  gap: .4rem;
}

li {
  position: relative;
  a {
    display: inline-block;
    width: 100%;
    padding-block: .4rem;
    background: white;
    overflow: hidden;
    text-decoration: none;
  }
  .wrapper {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    padding: .4rem;
    background: rgb(240 240 240);
    border-radius: 50vh 0 0 50vh;
    color: rgb(50 50 50);
    text-decoration: none;
    white-space: nowrap;
    &:before,
    &:after {
      content: "";
      position: absolute;
      top: -20px;
      right: 0px;
      width: 20px;
      height: 20px;
      background: rgba(0, 0, 0, 0);
      border-radius: 50%;
      box-shadow: 10px 10px 0 rgb(240 240 240);
      z-index: 2900;
    }
    &:after {
      top: initial;
      bottom: -20px;
      box-shadow: 10px -10px 0 rgb(240 240 240);
    }
    i {
      display: block;
      width: 20px;
      aspect-ratio: 1/1;
      background: rgb(160 160 160);
      border-radius: 50%;
    }
    span {
      max-width: 0;
      overflow: hidden;
      transition: margin .1s linear, max-width .1s linear;
    }
  }
  .tooltip {
    content: attr(data-title);
    position: absolute;
    top: 50%;
    left: 80%;
    z-index: -1;
    transform: translateY(-50%);
    scale: 0;
    opacity: 0;
    display: block;
    padding: .6rem 1.2rem;
    background: rgb(80 80 80);
    border-radius: .4rem;
    font-size: .8rem;
    color: white;
    white-space: nowrap;
    transition: transform .2s linear, opacity .1s linear;
  }
   :hover {
    .wrapper {
      background: hsl(210 100% 42%);
      color: white;
      &:before {
        box-shadow: 10px 10px 0 hsl(210 100% 42%);
      }
      &:after {
        box-shadow: 10px -10px 0 hsl(210 100% 42%);
      }
      i {
        background: hsl(0 50% 95%);
      }
    }
    +.tooltip {
      transform: translate(2rem, -50%);
      scale: 1;
      opacity: 1;
    }
  }
}

<section>
  <ul>
    <li>
      <a href="#">
        <span class="wrapper">
            <i></i>
            <span>Section 1</span>
        </span>
      </a>
      <span class="tooltip">Section 1</span>
    </li>
  </ul>
</section>

任何帮助将不胜感激。我希望这些信息能为您提供足够的帮助。

我已经遇到了一些关于溢出隐藏和位置绝对子项的问题，我知道我必须将相对于 DOM 中更高父级的位置放置。

但是在这里，需要整个部分的溢出，所以我有点迷失了。

Answer 1

并非所有

overflow-x

和

overflow-y

的组合均受支持。特别是，您不能在一个轴上进行滚动，而在另一轴上进行可见的溢出。

我的想法是让侧边栏足够宽以容纳菜单和工具提示。它将包含两列，左边一列包含菜单，右边一列包含工具提示。右栏实际上会与页面的其余部分重叠。