Flexbox:元素阴影不适用于订单属性

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属性的情况下执行此操作(仅限Flexbox功能)？

Answer 1

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

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

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