Material Design 是一种设计语言，它起源于 Google，用于设计应用程序和网站的视觉体验。Material Design 带来了很多新的元素和设计概念，比如阴影效果、卡片式界面、浮动操作按钮等。在使用 Material Design 的过程中，了解重要元素的位置和层级关系是非常重要的，它可以帮助你更好地设计你的应用程序和网站。
1. App Bar 的位置和层级关系
App Bar 是 Material Design 中非常重要的一个组件，它通常包含了应用程序的标题、导航按钮和其他重要的操作。在 Material Design 中，App Bar 通常位于屏幕顶部，并在 Z 轴上位于其他组件的最顶部。
<header class="mdc-top-app-bar">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
<span class="mdc-top-app-bar__title">Title</span>
</section>
</div>
</header>在上面的代码中，我们可以看到 App Bar 是一个 header 元素，并有一个类名 mdc-top-app-bar。在 App Bar 中，我们可以看到 mdc-top-app-bar__row 和 mdc-top-app-bar__section 元素，它们可以帮助我们更好地布局 App Bar。
2. Drawer 的位置和层级关系
Drawer 是 Material Design 中用于导航的组件，它通常由导航按钮触发。在 Material Design 中，Drawer 通常位于屏幕的左边，并在 Z 轴上位于其他组件之上。
-- -------------------- ---- -------
------ -------------------
---- ---------------------------
--- -------------------------------- ----------
------
---- ----------------------------
-- --------------------- ---------
-- --------------------- ----------------------- ---------------------------------
----
-- --------------------- ---------
-- --------------------- ----------------------- -------------------------------
----
------
--------在上面的代码中，我们可以看到 Drawer 是一个 aside 元素，并有一个类名 mdc-drawer。在 Drawer 中，我们可以使用 mdc-drawer__header 和 mdc-drawer__content 元素来布局 Drawer 的内容。
3. Card 的位置和层级关系
Card 是 Material Design 中用于展示内容的组件，它通常包含标题、描述、图像和其他相关内容。在 Material Design 中，卡片通常被放置在其他组件之上，但在屏幕上并不一定要占据顶部位置。
-- -------------------- ---- -------
---- -----------------
---- ---------------------------------
---- ---------------------- ---------------------- ------------------------ -------------------------
---- --------------------------
--- ---------------------------- ----------
--- ------------------------------- -------------
------
---- --------------------------
-- ----------------- ---------------- ------------------------- -------------------
-- ----------------- ---------------- ------------------------- ---------------- ----------
------
------
------在上面的代码中，我们可以看到卡片是一个 div 元素，并有一个类名 mdc-card。在卡片中，我们可以使用 mdc-card__primary-action 元素来布局卡片的内容。
4. Floating Action Button 的位置和层级关系
Floating Action Button 是 Material Design 中一个非常重要的组件，它通常用于触发应用程序中的最重要的操作。在 Material Design 中，Floating Action Button 通常位于屏幕底部右下角，并在 Z 轴上位于其他组件之上。
<button class="mdc-fab material-icons" aria-label="Add"> <span class="mdc-fab__icon">add</span> </button>
在上面的代码中，我们可以看到 Floating Action Button 是一个 button 元素，并有一个类名 mdc-fab。我们可以使用 mdc-fab__icon 类来设置按钮中的图标。
结论
在 Material Design 中，了解重要元素的位置和层级关系是非常重要的。通过掌握这些概念，你可以更好地设计你的应用程序和网站，提高用户体验。如果你想深入了解 Material Design，可以到官方网站查看更多信息和示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671770d4ad1e889fe221937d