css - 为什么不定位 :sticky; work

Question

我正在 Woocommerce 中设计一个分为两半的结帐页面。左边是表格，右边是订单概览。我将概览设置为 position:sticky;因此它会在您填写表格时向下滚动。

我实际上有几个不同的页面，其中包含 position:sticky; 的元素。它工作得很好，所以我不明白为什么我不能让它在这里工作。唯一的区别是 <h3>在列和 <form> 之间包装器。

form.checkout {
  display: block;
  position: relative;
}

.checkout:before,
.checkout:after {
  content: "";
  display: table;
  clear: both;
}

.col-1 {
  float: left;
  width: 50%;
  margin-right: 5%;
}

h3 {
  display: inline-block;
}

.col-2 {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  float: left;
  width: 45%;
}

<form class="checkout">
  <div class="col-1"></div>
  <h3>Overview</h3>
  <div class="col-2"></div>
</form>

Answer 1

你的 div 是粘性的，

检查一下

form.checkout {
  display: block;
  position: relative;
  height: 1000px;
}

https://jsfiddle.net/yto9uj32/