Почему не позиционируется: липкий; Работа

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/