如何让div与“position:fixed”容器重叠,并使用固定容器内容垂直滚动

还有 垂直滚动固定容器的内容。然而,我要让其中一个工作,但不是他们两个。我想知道是否有一个CSS唯一的解决方案?

jsfiddle 这证明了这个问题。

目标

[由于缺少信誉而删除的图像示例。可以找到它 here .]

功能目标是在固定位置的侧边栏中的输入控件旁边有一个可单击的标记,客户可以在该标记中编辑业务项的多个属性。标记应该与容器的边界重叠,以便更加突出。基于此,我至少要达到五个要求:

• 最上面的容器需要有位置:固定的,因为背景中的SPA可以在两个方向上滚动
• 如果需要,最上面的固定容器的内容应该垂直滚动,但不能水平滚动
• 此框应与最上面的容器边界重叠
• 当滚动最顶部容器的内容时,此框应垂直滚动(因此也是框的目标)

基本结构是固定容器>内容>重叠div。我知道溢出和相对定位的组合将停止绝对定位子级的重叠。因此,我尝试了几种CSS规则和HTML标记的变体,但最后要么是框重叠,要么是与目标滚动。你关于如何在没有代码隐藏的情况下解决这个问题的想法非常值得赞赏。

这是(简化的)HTML标记:

<div class="sidebar-container">
  <div class="sidebar-content-wrapper">
    <div class="sidebar-content">
      <div class="sidebar-content-main">
        <!-- more content -->
        <div class="overlap-container">
          <div class="overlap-wrapper">
            <div class="overlap-relative-container">
              <div class="overlap-box"></div>
            </div>
            <div class="overlap-caption">Some text, the box should appear left to this element.</div>
          </div>
        </div>
        <!-- more content -->
      </div>
    </div>
  </div>
</div>

.sidebar-container {
  position: fixed;
  // [ ... ]
}

它是子级的,内容包装器有规则为内容启用垂直滚动,而水平滚动条是隐藏的:

.sidebar-content-wrapper {
  height: 100%;
  // content should be scrollable vertically, while horizontal scroll is not allowed
  overflow-y: scroll;
  overflow-x: hidden;
}

应与容器重叠的盒子是绝对放置的:

.overlap-box {
  position: absolute;
  left: -2em;
  width: 3em;
  height: 3em;
  z-index: 99;
  // [ ... ]
}

停在这里会让盒子与固定的容器重叠。但是,如果内容是垂直滚动的,则框也不会滚动,因为它位于下一个定位的元素,即 .sidebar-container . 所以我们再加一个 position: relative

.overlap-relative-container {
  position: relative;
}

快速和简单,这使框滚动与我的固定容器的内容。但它将不再与固定容器重叠。

完整的代码可以在这里找到 jsfiddle公司

迄今为止的经验教训

• 元素中指定 overflow CSS规则将剪辑绝对定位的子级
• 搜索Google等会显示很多结果,但我还没有找到解决这个问题的方法。我找到的唯一关于我的问题的参考是在一篇名为 How to make absolute positioned elements overlap their overflow hidden parent
• 尝试用CSS实现复杂的布局场景似乎比我预期的要难