The higher in elevation, the more important. 

Surfaces in the front can indicate that 1) the content is more important, 2) hopes to attract more attention, like a dialog, 3) can control the surfaces behind it.



Content at different elevations

Coplanar surfaces are most of the time of equal importance, but sometimes hierarchy can be demonstrated through positioning.  
- Left-to-right positioning (in English context) can indicate hierarchy.
- Top-to-bottom positioning



Content on coplanar surfaces

"Content relates to other content depending on whether they are at similar or different elevations"

University of Michigan - Ann Arbor

"Elevation is the relative distance between two surfaces along the z-axis."

Component elevation values:
- Nav drawer: 16dp
- App bar: 4dp
- Card: 1dp to 8dp
- FAB: 6dp
- Button: 2dp to 8dp
- Dialog: 24dp

Elevation in Design Science 

Material Design Documentation

Elevation Hierarchy

"Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows."

Measuring elevation

"Surfaces at different elevations do the following:

- Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars
- Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection
- Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces

Elevation can be depicted using shadows or other visual cues, such as surface fills or opacities."

Material Design shows elevation using shadows.

The elevation system

"To successfully depict elevation, a surface must show:

1. Surface edges, contrasting the surface from its surroundings
2. Overlap with other surfaces, either at rest or in motion
3. Distance from other surfaces"

Depicting elevation

- Changes in shadows
- Displaying overlap
- Pushing
- Scaling
- Parallax

Motion and elevation

"All elements have default values for resting elevation and dynamic elevation offsets. Certain components are positioned at higher elevations than others, establishing a consistent elevation order across all components."

Learn Before

Related

Learn After