Angular2 +マテリアル：mat-elevation-zにもかかわらず、マットツールバーがマットサイドデッキコンテナに影をつけない*

Question

Material guideの外観を模倣しようとしたときに、 sidenav - コンテナ要素：

• Link to the pageツールバーとsidenavを表示しますが、ドロップシャドウは表示されません。一人でツールバーを示す
が
• Link to the page、影がHTMLコードを参照してください

をレンダリングされ、それがよりシンプルにすることはできません。私は何が欠けていますか？おかげで...

app.component.html

<mat-toolbar class="mat-elevation-z6" color="primary"> 
    toolbar 
</mat-toolbar> 

<mat-sidenav-container > 

    <!-- Side menu --> 
    <mat-sidenav mode="side" opened="true"> 

    <h3>Menu 1</h3> 
    <ul> 

     <!-- Home (aka dashboard) --> 
     <li> 
     <a routerLink="/">dashboard</a> 
     </li> 

     <!-- Home (aka dashboard) --> 
     <li> 
     <a routerLink="/resolutions">resolutions</a> 
     </li> 
    </ul> 

    <!-- List resolutions --> 
    <h3>Menu 2</h3> 
    <ul> 
     <li> 
     <a>incentive</a> 
     </li> 
    </ul> 

    </mat-sidenav> 

    <!-- Routed contents --> 
    <div class="contents"> 
    <router-outlet></router-outlet> 
    </div> 

</mat-sidenav-container> 

Answer 1

は全く同じ問題がありました。

<mat-sidenav-container class="sidenav-container"> 
... 
</mat-sidenav-container> 

Answer 2

が、テストすることができていません。私は、上昇していないカードでも同様の問題を抱えていました。私はちょうど左から詰め込む必要があります。

<mat-sidenav mode="side" opened="true" style="margin: 10px;">

Answer 3

ます。また、これを試すことができ

.sidenav-container { 
    z-index: -1 !important; 
} 

とマットsidenav-コンテナにこれを追加しました：：

.sidenav-container { 
    position:fixed; 
    width:100%; 
    z-index:-1; 
}