Wie kann ich ein Layout mit Winkel Material Layout-Design wie: 
Angular Material Design-Layout
nahm ich ein Beispiel aus material design
Beschreibung: eine md-Content-Box mit Schlagschatten über einen MD- schweben Symbolleiste.
Ich glaube nicht, dass Sie dies rein in Angular Material tun können, aber Sie können es meist in Material und dann auf eine einfache CSS-Klasse hinzufügen. Vorausgesetzt, dass Sie alle erforderlichen Skript und CSS-Abhängigkeiten haben, wird Ihr html wie folgt aussehen:
<body ng-app="materialDesignApp" ng-controller="MainCtrl" layout="column">
<md-toolbar flex="33">
</md-toolbar>
<div layout-align="center start" layout="row">
<md-content class="md-whiteframe-z2 move-up" flex="66">
<p layout-margin>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis varius nibh, eget fringilla massa. Phasellus sollicitudin, tellus vel hendrerit commodo, eros purus placerat mi, a tristique orci lacus egestas lectus. Aenean congue rutrum suscipit. Aliquam erat volutpat. Sed sollicitudin dui sit amet sapien luctus tincidunt. In eu ipsum lectus. Duis bibendum auctor lorem hendrerit tempor. Aenean rhoncus, dui in mattis interdum, ex erat ultricies libero, ut tincidunt lectus ex finibus lacus. Integer iaculis, nunc tempus finibus cursus, elit eros dictum dolor, et dapibus lectus sapien at risus. Quisque ac metus in turpis malesuada rutrum sed quis quam. Mauris pulvinar dignissim nunc a laoreet. Nam a arcu at sem imperdiet iaculis.
</p>
</md-content>
</div>
</body>
Und Ihre CSS wird wie folgt aussehen:
.move-up {
position: relative;
top: -60px;
z-index: 99;
}
hier ein Arbeits zupfen:
http://plnkr.co/edit/6lHVbV?p=preview
Die Schlüssel hier sind layout-align="center start", die das div horizontal auf der Seite (unter Verwendung flexbox) zentriert und i platziert t direkt unter der md-toolbar. Die layout="row" ist auch notwendig, um sicherzustellen, dass wir ein Flexbox-Layout auf den Inhalt des div verwenden.
Von dort gibt flex="66" die Box mit einer Breite von 66%, .md-whiteframe-z2 die Kulisse fügt hinzu, und dann unsere .move-up Klasse bewegt es sich nur um 60 Pixel nach oben mit position: relative; top: -60px und legt sie über der Symbolleiste z-index.
@zero_coding: Können Sie bitte eine Beschreibung des Bildes zu Ihrer Frage hinzufügen, so dass die Leute es in Zukunft leichter finden können? –
Natürlich werde ich es versuchen. Manchmal ist es schwierig, mich selbst zu beeindrucken. Vielen Dank für Ihre Hilfe. –
Ich bin froh, dass ich helfen konnte –