css - 以一致的行为实现 html5 粘性样式属性

Question

我正在尝试在 firefox 和 safari 浏览器中使用 html5 样式属性 sticky，但是当包含区域内有表格时，行为会有所不同。

有没有办法设置表格样式以允许粘性元素显示在 safari 中的表格上方？

这是一个codepen展示行为。

这是CSS

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 10px;
  z-index: 1;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

这是html

<div>
   <h2 class="sticky">This is just sticky</h2>
  Massa id neque aliquam vestibulum morbi blandit cursus. Elit eget gravida cum sociis natoque penatibus. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Aliquet sagittis id consectetur purus ut. Nisi vitae suscipit tellus mauris a. Suspendisse sed nisi lacus sed. Sed pulvinar proin gravida hendrerit lectus a. Mauris nunc congue nisi vitae. Mi bibendum neque egestas congue quisque egestas diam. Velit aliquet sagittis id consectetur purus ut. At varius vel pharetra vel turpis nunc eget lorem dolor. Erat velit scelerisque in dictum non. Gravida arcu ac tortor dignissim convallis. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Magna eget est lorem ipsum dolor. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat.
    <table class="table--ledger" border="1">
            <tr>
                <td>First Value</td>
                <td>Second Value</td>
                <td>Third Value</td>
                <td>Fourth Value</td>
                <td>Fifth Value</td>
                <td>Sixth Value</td>
                <td>Seventh Value</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>$2.75</td>
                <td>$95.63</td>
                <td>$62.10</td>
                <td>$0.80</td>
                <td>$72.79</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>$2.19</td>
                <td>$61.54</td>
                <td>$76.07</td>
                <td>$29.41</td>
                <td>$98.75</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>$6.97</td>
                <td>$59.19</td>
                <td>$90.49</td>
                <td>$20.93</td>
                <td>$69.93</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>$3.11</td>
                <td>$21.67</td>
                <td>$71.98</td>
                <td>$49.37</td>
                <td>$71.13</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>$1.10</td>
                <td>$95.75</td>
                <td>$25.13</td>
                <td>$33.41</td>
                <td>$47.73</td>
            </tr>
    </table>
</div>


    <h1 class="vertical-space-large">here is some more text...</h1>
<h1 class="vertical-space-large">and here is even more text...</h1> 

    <div data-lorem="p">
  <span class="sticky"><h2>This is sticky as well</h2></span>
Massa id neque aliquam vestibulum morbi blandit cursus. Elit eget gravida cum sociis natoque penatibus. Adipiscing tristique risus nec feugiat in fermentum posuere urna. Aliquet sagittis id consectetur purus ut. Nisi vitae suscipit tellus mauris a. Suspendisse sed nisi lacus sed. Sed pulvinar proin gravida hendrerit lectus a. Mauris nunc congue nisi vitae. Mi bibendum neque egestas congue quisque egestas diam. Velit aliquet sagittis id consectetur purus ut. At varius vel pharetra vel turpis nunc eget lorem dolor. Erat velit scelerisque in dictum non. Gravida arcu ac tortor dignissim convallis. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Magna eget est lorem ipsum dolor. Aenean sed adipiscing diam donec adipiscing tristique risus nec feugiat. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Ultrices in iaculis nunc sed augue lacus viverra. Consequat interdum varius sit amet mattis. Mattis pellentesque id nibh tortor id.
Aliquam eleifend mi in nulla posuere. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Quis lectus nulla at volutpat. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. A iaculis at erat pellentesque. Faucibus in ornare quam viverra orci sagittis eu volutpat. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Ultricies leo integer malesuada nunc vel. Erat nam at lectus urna duis convallis convallis. Ante in nibh mauris cursus mattis molestie a iaculis. Sagittis nisl rhoncus mattis rhoncus urna neque. Dolor sit amet consectetur adipiscing elit ut aliquam. Sed felis eget velit aliquet sagittis. Eget arcu dictum varius duis. Neque convallis a cras semper auctor neque vitae tempus quam.
Turpis cursus in hac habitasse platea dictumst quisque. Velit laoreet id donec ultrices. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Vitae et leo duis ut. Diam in arcu cursus euismod quis. Aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque. Sapien pellentesque habitant morbi tristique. Nisi scelerisque eu ultrices vitae. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Sapien et ligula ullamcorper malesuada proin libero. Bibendum ut tristique et egestas. Id diam vel quam elementum pulvinar etiam non quam.
</div>




    <h1 class="vertical-space-large">here is some more text...</h1>
    <h1 class="vertical-space-large">and here is even more text...</h1> 

Answer 1

html5 粘性样式属性显示的不一致行为之间存在差异的原因在于，当存在或不存在显示属性时，每个浏览器如何实现“粘性”。

添加一个

display: inline-block;

或

display: block;

视情况而定 - 它可能会影响您的布局 - 将减轻这种情况。

查看此 codepen进行演示。