首页 > web前端 > css教程 > 正文

纯CSS中可以堆叠多个粘性元素吗?

DDD
发布: 2024-10-31 18:57:02
原创
463 人浏览过

Can Multiple Sticky Elements Be Stacked in Pure CSS?

是否可以在纯 CSS 中将多个粘性元素堆叠在一起?

可以在此处看到所需的行为:
https://webthemez.com/demo/sticky-multi-header-scroll/index.html

只是我更喜欢使用纯 CSS,而不是 Javascript 实现。我已经尝试了多个粘性元素,但我无法阻止它们推出其他粘性元素。我尝试将它们放在相同的堆叠上下文中:

<code class="css">#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}</code>
登录后复制

但无法让它工作,如下所示。任何见解将不胜感激!

<code class="html"><div id="container">
  <article id="sticky">
    <header>

    </header>
    <main><h1 class="sticky-1">Sticky heading</h1></code>
登录后复制

以上是纯CSS中可以堆叠多个粘性元素吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!