Css 创建顶部带有固定搜索栏的sidenav（AngularMaterial2）

在过去的几次中，我有一个应用程序，其中我有一个sidenav，有很多导航选项，数量超过sidenav的高度

为了帮助用户体验部分，我想在sidenav的顶部包含一个文本框，它将固定在顶部，即使向下滚动导航栏也不会移动

我只成功地将文本框放入sidenav中，但没有将其固定在顶部

我试着用CSS来处理它，要么是

位置：fixed

，要么是

位置：absolute

，还有很多我后来忘记的东西，但都没用。我已经设法把它定位在我想要的地方，但是背景已经消失了，而且它没有在实际的sidenav中发生，因为导航链接出现在文本框后面

我在其他网站上没有看到类似的方法，因此我没有地方可以借鉴。

---

基本内容如所示，只是顶部应该有一个文本框，以帮助过滤导航栏中的链接。

我无法确定您真正想要的是什么。。。但我认为这是一个尝试和使用我最近遇到的技术的好地方。您可以使用

transform:translate（x，x）

为

fixed

定位创建新的上下文。通常，

fixed

会将主体视为其边界，但在元素上使用translate似乎会为固定定位创建自己的子范围

.parent {
  transform: translate(0,0);
}

.parent .form {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.parent .sidebar-module-list {
  padding-top: {{formHeight}};
}

试试这个