4

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)?

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
Ionel Lupu
  • 2,695
  • 6
  • 29
  • 53

1 Answers1

7

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/

Nico O
  • 13,762
  • 9
  • 54
  • 69
  • 1
    Cool. But why the z-index works here? It supposed to work only for non static positioned elements.. – Ionel Lupu Dec 15 '14 at 12:42
  • 3
    @boyd For flex items `z-index` would establish a stacking context even if the computed value of `position` is `static`. – Hashem Qolami Dec 15 '14 at 12:46
  • 1
    Very good question, [the w3c says](http://www.w3.org/TR/css-flexbox-1/#painting): `Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static.` – Nico O Dec 15 '14 at 12:46
  • 1
    I did not know it before either, glad you asked. Best of luck! – Nico O Dec 15 '14 at 12:51