Question

我尝试使用CSS3的flexbox功能创建一个简单的布局，但我遇到了一个问题：我无法将nav元素的阴影置于{{1即使main元素位于nav。

之后，也可以使用元素

我尝试使用main属性，但我无法弄清楚为什么order的阴影位于nav

之下

＆＃13;

main

＆＃13;

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;
}

＆＃13;

JSFIDDLE

可以在不使用<main>Main content</main> <nav>Navigation</nav> <footer>Footer</footer>属性的情况下执行此操作（仅限Flexbox功能）？

Answer 1

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

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

以下是演示：http://jsfiddle.net/Lfaezsek/1/

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

1 个答案: