Flexbox: Element shadows doesn't work with order property

Question

I'm trying to create a simple layout using CSS3's flexbox feature but I encountered a problem: I can't put the shadow of my nav element over the main element even if the nav element is after the main.

I tried using the order property for this but I can't figure out why the nav's shadow is under the 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

It is possible to do it without using the poasition:abosolute property (only with flexbox features)?

Answer 1

Use the z-index property for stacking elements in the desired order.

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

Here is a demo: http://jsfiddle.net/Lfaezsek/1/