以一致的行为实施 html5 粘性样式 属性
Implementing the html5 sticky style property with consistent behaviour
我正在尝试在 firefox 和 safari 浏览器中使用 html5 样式 属性 粘性，但是当包含区域内有 table 时，行为会有所不同。
有没有办法设置 table 的样式以允许粘性元素显示在 safari 中的 table 上方？
这是一个 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>.75</td>
<td>.63</td>
<td>.10</td>
<td>[=13=].80</td>
<td>.79</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>.19</td>
<td>.54</td>
<td>.07</td>
<td>.41</td>
<td>.75</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>.97</td>
<td>.19</td>
<td>.49</td>
<td>.93</td>
<td>.93</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>.11</td>
<td>.67</td>
<td>.98</td>
<td>.37</td>
<td>.13</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>.10</td>
<td>.75</td>
<td>.13</td>
<td>.41</td>
<td>.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>
显示 html5 粘性样式 属性 的不一致行为之间存在差异的原因是每个浏览器在显示时如何实现 'sticky' 属性 是否在场。
添加一个
display: inline-block;
或
display: block;
视情况而定 - 它可能会影响您的布局 - 将减轻这种情况。
请参阅此 codepen 进行演示。
我正在尝试在 firefox 和 safari 浏览器中使用 html5 样式 属性 粘性，但是当包含区域内有 table 时，行为会有所不同。
有没有办法设置 table 的样式以允许粘性元素显示在 safari 中的 table 上方？
这是一个 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>.75</td>
<td>.63</td>
<td>.10</td>
<td>[=13=].80</td>
<td>.79</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>.19</td>
<td>.54</td>
<td>.07</td>
<td>.41</td>
<td>.75</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>.97</td>
<td>.19</td>
<td>.49</td>
<td>.93</td>
<td>.93</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>.11</td>
<td>.67</td>
<td>.98</td>
<td>.37</td>
<td>.13</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>.10</td>
<td>.75</td>
<td>.13</td>
<td>.41</td>
<td>.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>
显示 html5 粘性样式 属性 的不一致行为之间存在差异的原因是每个浏览器在显示时如何实现 'sticky' 属性 是否在场。
添加一个
display: inline-block;
或
display: block;
视情况而定 - 它可能会影响您的布局 - 将减轻这种情况。
请参阅此 codepen 进行演示。