当我阅读有关MDN position属性的文章时，这是一个问题。我认为此处sticky描述的行为与实际行为之间存在明显的差异。
根据MDN，固定位置元素将被视为相对位置元素，直到超过指定的阈值为止；当超过阈值时，它们将被视为固定位置元素，直到达到父元素的边界为止（Link）。
粘性定位可以看作是相对定位和固定定位的混合体。粘性定位的元素将被视为相对定位，直到其超过指定的阈值为止，在该点处将其视为固定的，直到其到达其父对象的边界为止。例如...
Run Code Online (Sandbox Code Playgroud)#one { position: sticky; top: 10px; }...将相对位置为id的元素定位到视口滚动之前，以使元素距离顶部小于10个像素。超过该阈值，该元素将从顶部固定为10个像素。
因此，我创建了以下代码并确认了操作。
#one { position: sticky; top: 10px; }
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
}
.container>* {
width: 100%;
}
header {
background: #ffa;
height: 130vh;
}
main {
background: #faf;
height: 210vh;
}
footer {
background: #faa;
height: 8vh;
position: sticky;
bottom: 0;
}
.footer {
background: #aff;
height: 100vh;
}根据MDN文章，此代码“是相对放置元素，直到通过滚动视口使元素的位置离视口底部小于0px为止，并且当它离底部大于0px时成为固定的放置元素“ 我刚在想。
但是，结果是“滚动到固定位置元素，直到通过滚动视口使元素的位置从视口的下端开始小于0px为止，并且当从下视点大于0px时成为相对排列的元素结束”。 …
我正在试验粘性导航，但遇到了问题。问题是，当我将导航放在其他元素中时，它不再具有粘性。
.nav-wrapper{
position: absolute;
bottom: 0;
}
.nav-wrapper nav{
position: sticky;
top: 0;
} <div class="nav-wrapper">
<nav>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
</nav>
</div>我试图了解CSS的“粘性”功能。我可以让它坚持其父级的“顶部”，而不是其“底部”
我的测试代码是：
.block {
background: pink;
width: 50%;
height: 200px;
}
.move {
position: sticky;
bottom: 0;
}1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>当我将“ move”设置为“ top：0”时，它停留在粉红色块的顶部，但是当我将其设置为“ bottom：0”时，它似乎不再固定/发粘。
在纯CSS中是否可以将多个粘性元素彼此堆叠？
可以在此处看到所需的行为：https : //webthemez.com/demo/sticky-multi-header-scroll/index.html
只有我更喜欢使用纯CSS，而不是Javascript实现。我已经对多个粘性元素进行了一些实验，但是不能阻止它们推出其他粘性元素。我试过将它们放在相同的堆栈上下文中：
#sticky .sticky-1,
#sticky .sticky-2
{
position: sticky;
}
#sticky .sticky-1
{
top: 1em;
z-index: 1;
}
#sticky .sticky-2
{
top: 2em;
z-index: 1;
}
但是无法正常工作，如下所示。任何见解将不胜感激！
#sticky .sticky-1,
#sticky .sticky-2
{
position: sticky;
}
#sticky .sticky-1
{
top: 1em;
z-index: 1;
}
#sticky .sticky-2
{
top: 2em;
z-index: 1;
}
<div id="container">
<article id="sticky">
<header>
</header>
<main><h1 class="sticky-1">Sticky heading</h1>
<p>here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes …导航栏粘在顶部，直到我滚动出英雄图像然后消失。我希望导航栏出现在整个页面中。有任何想法吗？
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Me</a>
</li>
</ul>
</div>
</nav>
<!--Navbar end-->
<!-- Homescreen hero -->
<div class="hero-image" id="home">
<div class="hero-text">
<h1 class="name">Text</h1>
<h1>Text</h1>
</div>
</div>
下面是代码片段，如果运行它，您可以看到标题元素没有粘贴。我查看了以下问题。 “位置：粘性；” 不工作的 CSS 和 HTML 和CSS：“位置：粘性” 在许多其他人中定义了“高度”时不起作用，但它没有帮助..
这是我的代码。
<body style="margin: 0">
<div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
<div>header contents</div>
<div>header contents</div>
</div>
<div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
<div style="height: 1000px;">
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
</div>
</div>
</body>我还注意到，如果我从容器 div 中删除 position: absolute ，粘性开始正常工作。任何帮助将不胜感激。
我一直在尝试从这个网站实现这种滚动效果： https: //livingbeautyinc.com。当您滚动时，之前的内容会保持在同一位置，而新内容会堆叠在旧内容的顶部。我尝试过使用position:stickythen 设置z-index每个组件，但它似乎不起作用。有人知道如何用 CSS 制作这种滚动效果吗？
来源： https: //codepen.io/daniel5120/pen/PoEoaEP 因此，理想情况下，我想让第一个容器上的内容保持完全相同，然后第二个元素保持在第一个元素的顶部。