創建在頂部（AngularMaterial2）

Question

過去幾次有我有一個應用程序在那裏我有很多的導航選項，其中量超過sidenav的高度的sidenav固定搜索欄一sidenav。

爲了幫助用戶體驗，我希望在sidenav的頂部包含一個文本框，該文本框將固定在頂部，即使導航欄向下滾動也不會移動。

我只成功把文本框的sidenav內，但沒有把它固定在上面。

我試過使用CSS來處理它，要麼使用position: fixed要麼使用position: absolute，還有很多事情我忘記了，但都沒有成功。我已經將它定位在我想要的位置，但背景消失了，並且它不在實際的sidenav內發生，因爲導航鏈接出現在文本框後面。

我還沒有看到其他網站類似的方法，所以我還沒有一個地方，採取從例子。
基礎知識在https://material.angular.io/如圖所示，除了應該在上面的文本框，以幫助在導航欄過濾器鏈接。

Answer 1

我不能確定你真正想要的...但我認爲這是一個偉大的地方，嘗試和使用的技術，最近，我跑過。您可以使用transform: translate(x,x)爲fixed定位創建新的上下文。通常fixed會尊重主體，因爲它是非常好的 - 但對元素使用翻譯似乎會創建它自己的用於固定位置的子範圍。

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

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

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

Here is an example CodePen