Question

我在单页应用程序中有一个固定容器，我希望该容器内的一个div与固定容器的边界重叠，并且垂直滚动固定容器的内容。但是，我要使一个或另一个工作，但不能同时使两个工作。我想知道是否只有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和SO将显示很多结果，但是我没有找到解决此特定问题的方法。我发现我的问题的唯一参考是博客文章How to make absolute positioned elements overlap their overflow hidden parent
尝试仅使用CSS来实现复杂的布局方案似乎比我预期的要困难

免责声明：我知道有一个使用onscroll事件和JavaScript的可行解决方案。我愿意实施此解决方案以最终解决我的问题。尽管如此，纯CSS解决方案还是更好的恕我直言，我想削减这个小高地结：-）

Answer 1

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

overflow: visible;

或者，就您而言：

overflow-x: visible;

在父容器上。

不幸的是，您还希望能够垂直滚动，这将优先于可见性参数，而不管其附加到的轴如何。强制将子代裁剪为父代尺寸。

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

“此值表示内容已裁剪到填充盒子，...”

有关此冲突/问题的更多信息：

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

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

如果您找到仅CSS的解决方法，那么我相信我们其他人都想知道！但是看来您可能不得不使用不可滚动的侧边栏或采用其他设计。

如何让div与“位置：固定”容器重叠并使用固定容器内容垂直滚动

目标

代码

到目前为止的经验教训

1 个答案: