我想我知道会发生什么,因为我可以从截图中看到。
为什么会这样?这是因为当你将一个元素设置为 "固定 "时,它们的位置不再是相对于它们的父元素而言,而是相对于html文档而言。它是相对于html文档的。你也可以说它是从 "正常的 "contentdocument流程中移除的。
由于我错过了一些关于你想要实现的信息,我的建议是在属性 "position "中使用 "sticky "值。这将使它保持在文档流内部,并且相对于它们的父级文档是 "固定 "的。如果你想实现这个目标,我建议你阅读一下,因为使用它可能很棘手。
举个例子。
.container {
width: 100%;
height: 90rem;
}
.container-child {
position: sticky;
top: 0; /* Needed, because this way you'll let the browser know when to get sticky when the viewport(top) of the user 'touches' the element. */
}
Source: MDN position: sticky MDN position: sticky
要注意的是,在某些浏览器中,浏览器的支持是有限的,或者说是奇特的。
我还建议为你的问题设置一个codepen例子,并描述预期的行为。这样更容易理解和复制你的问题。) https:/codepen.io