如何让 div 与 "position: fixed" 容器重叠并垂直滚动固定容器内容

Question

我在单页应用程序中有一个固定容器，我希望此容器内的 div 与固定容器的边界重叠并且随内容垂直滚动的固定容器。但是，我正在让一个或另一个工作，但不是两个都工作。我想知道是否有 CSS 唯一的解决方案？

有一个 jsfiddle 证明了这个问题。

目标

[示例图像因缺少声誉而被删除。可以查到here.]

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

最上面的容器需要position: fixed，因为后台的SPA可以双向滚动
如果需要，最上面的固定容器的内容应垂直滚动，但不得水平滚动
应在内容中的目标旁边放置一个框
此框应与最顶部容器的边界重叠
当最顶层容器的内容滚动时（因此也是框的目标），此框应垂直滚动

基本结构是固定容器 > 内容 > 重叠 div。我知道溢出和相对定位的组合将停止重叠绝对定位 child。因此，我尝试了 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;
  // [ ... ]
}

它是 child，内容包装器具有启用内容垂直滚动的规则，而水平滚动条是隐藏的：

.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 到框的 parent 元素：

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

快速简单，这使框可以随我的固定容器的内容滚动。但它不会再与固定容器重叠。

完整代码可以在jsfiddle.

中找到

到目前为止的经验教训

指定 overflow CSS 规则之一的元素内的任何相对定位元素将裁剪绝对定位 children
搜索 Google 和 SO 会显示很多结果，但我没有找到解决这个特定问题的方法。我找到的关于我的问题的唯一参考是博客 post 的评论 How to make absolute positioned elements overlap their overflow hidden parent
尝试使用 CSS 实现复杂的布局方案似乎比我预期的要难

免责声明：我知道有一个使用 onscroll 事件和 JavaScript 的有效解决方案。我愿意实施此解决方案以最终解决我的问题。尽管如此，CSS-only 解决方案会更好，恕我直言，我想快刀斩乱麻:-)

Answer 1

据我所知，在这方面允许子元素显示在其父容器之外的唯一方法是使用

overflow: visible;

或者，在您的情况下：

overflow-x: visible;

在父容器上。

不幸的是，您还希望能够垂直滚动，这将优先于可见性参数，而不管它附加到哪个轴。强制子项被裁剪到父维度。

来源： https://www.w3.org/TR/css-overflow-3/#valdef-overflow-scroll

"This value indicates that the content is clipped to the padding box, ..."

关于此的更多信息conflict/issue：

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

https://www.w3.org/TR/css-overflow-3/#scrollable-overflow

如果您找到 CSS 唯一的解决方法，我相信我们其他人都想知道！但看来您可能需要一个不可滚动的侧边栏或使用不同的设计。

如何让 div 与 "position: fixed" 容器重叠并垂直滚动固定容器内容

How to let div overlap a "position: fixed" container and scroll vertically with fixed containers content

css

css-position

overflow

目标

密码

到目前为止的经验教训