是否可以用“位置：粘性”覆盖“溢出：隐藏”父母？

Question

我有一个两列布局，我希望右列为position: sticky，以便在滚动较长的左列时保持在视图中。

这是两个引导列，所以我要做的第一件事就是删除浮动（而是使用display: inline-block）。

这本身就可以正常工作，或者在这个特定页面的 DOM 顶部附近，但是在呈现的位置（唉，大约有 30 个左右的 div 深......别问...... ) 我无法让它工作。两列都在继续滚动。

我知道父元素是否有一个 overflow 属性而不是 visible 可以破坏 position: sticky 但这似乎不是这里的问题。如果 any 链上的父元素设置了溢出设置，它会破坏粘性定位吗？

我只是确定在这种情况下要寻找什么，以确定在这种情况下是什么破坏了它。在粘性定位方面还有其他需要注意的关键事项吗？

编辑：我改写了我的问题，因为它确实出现（经过进一步调查和测试）问题是 DOM 顶部附近的父元素设置为 overflow-x: hidden。由于这是共享代码，我必须找出原因以及它存在的原因。

但是...在此期间，是否有任何已知的解决方法...可以使用 DOM 树更下方的元素作为定位为粘性的项目的包含元素？

在下面的示例中，如果您从.theproblem 中删除溢出，则页面会按照我的意愿运行（当您滚动页面时，右列会“粘住”）。

.theproblem {
  overflow-x: hidden;
}

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>

JSBin link

Answer 1

您已经注意到粘性位置和滚动之间的任何溢出属性都会破坏它（此处解释：Why is 'position: sticky' not working with Core UI's Bootstrap CSS 和此处What are `scrolling boxes`?）。

在您的情况下，一种解决方法是将滚动条移动到另一个元素并隐藏默认元素：

.theproblem {
  overflow-x: hidden;
}
/* Added this */
.columnwrapper {
  height:100vh;
  overflow:auto;
}
body {
  overflow:hidden;
  margin:0;
}
/**/

.column {
  display: inline-block;
  width: 45%;
  vertical-align: top;
}

.column1 {
  border: 1px solid red;
  height: 1000px;
}

.column2 {
  border: 1px solid green;
  position: sticky;
  top: 1px;
}

<div class="theproblem">
  <div class="columnwrapper">
    <div class="column column1">
      This is column 1 (the tall one)
    </div>
    <div class="column column2">
      This is column 2 (the sticky one)
    </div>
  </div>
</div>