Flexbox：元素阴影不适用于 order 属性

Question

我正在尝试使用 CSS3 的 flexbox 功能创建一个简单的布局，但我遇到了一个问题：我无法将 nav 元素的阴影放在 main 元素上，即使 nav 元素在后面main。

我尝试为此使用order 属性，但我不明白为什么nav 的阴影在main 下方

html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
body >* {
  background-color: #333;
  color: #bdbdbd;
  box-shadow: 0px 0px 10px 2px #000;
  text-shadow: 0 -1px 0 #000;
  padding: 10px;
}
main {
  height: 500px;
  order: 1;
}
nav {
  order: 0;
}
footer {
  order: 2;
}

<main>Main content</main>
<nav>Navigation</nav>
<footer>Footer</footer>

JSFIDDLE

不使用poasition:abosolute 属性是否可以做到这一点（仅适用于弹性盒功能）？

Answer 1

使用z-index 属性按所需顺序堆叠元素。

nav {
    order:0;
    z-index:2;
}

这是一个演示：http://jsfiddle.net/Lfaezsek/1/