Design Atlas
한국어
◫ Spatial UI & XR

Depth hierarchy

뎁스 하이어라키

Instead of a flat UI’s z-index, pushing background, content, and controls to different real Z distances to express what’s in front of what.

Also known as: Z-depth layeringDepth stacking
···
html
<div class="scene"><div class="stage" id="stage">
  <div class="plane bg">Room</div>
  <div class="plane mid">Content</div>
  <div class="plane fg">Control</div>
</div></div>
css
body{background:radial-gradient(circle at 50% 30%,#22223e,#0b0b16 70%)}
.scene{position:absolute;inset:0;display:grid;place-items:center;perspective:900px}
.stage{position:relative;width:min(70%,320px);height:min(70%,200px);transform-style:preserve-3d;animation:sway 7s ease-in-out infinite}
.plane{position:absolute;inset:0;margin:auto;display:grid;place-items:center;border-radius:16px;font-weight:700;color:#fff;
  font-size:clamp(10px,3vmin,13px);letter-spacing:.02em}
.bg{width:100%;height:100%;background:linear-gradient(135deg,#2b2b52,#15152c);box-shadow:0 30px 60px rgba(0,0,0,.5);transform:translateZ(-150px)}
.mid{width:74%;height:60%;background:linear-gradient(135deg,#4a4ad1,#5b5bf7);box-shadow:0 24px 40px rgba(0,0,0,.4);transform:translateZ(-30px)}
.fg{width:36%;height:24%;background:linear-gradient(135deg,#ff7a59,#f25c8a);box-shadow:0 16px 30px rgba(0,0,0,.4);transform:translateZ(90px)}
@keyframes sway{0%,100%{transform:rotateY(-11deg) rotateX(5deg)}50%{transform:rotateY(11deg) rotateX(-3deg)}}

On a flat screen, "this sits above that" is faked with a z-index number and a drop shadow. In spatial UI you can actually place things at different distances — a background panel far back, body content in the middle, a floating button pulled toward the viewer.

That spacing ties directly to eye focus (vergence-accommodation). Too little distance between layers and the depth doesn’t register; too much and the eyes have to refocus every time attention jumps between layers, which tires them out. Foreground elements are usually offset only modestly from the background.

The demo stacks background, content, and controls at different Z and tilts them slowly — the closer layer moves more, which is the motion parallax you’d feel moving your head with a real headset on.

When to use

Keep it to three layers or fewer, and keep the frontmost layer inside the comfortable reach zone. Express hierarchy with depth, but leave 2D cues like contrast and size too — it keeps things accessible.