Flexbox：元素阴影不适用于订单属性 [英] Flexbox: Element shadows doesn't work with order property

问题描述

我试图使用CSS3的flexbox功能创建一个简单的布局，但我遇到了一个问题：我不能把 nav 元素的阴影在<即使 nav 元素在 main 之后，也可以使用 main / p>

我尝试使用 order 属性，但我不知道为什么 nav 的阴影在主

  html {height：100％;} body {display：flex; flex-direction：column;高度：100％; margin：0;} body> * {background-color：＃333;颜色：#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>< nav> Navigation< / nav>< footer> Footer< / footer>   

JSFIDDLE

可以不使用 poasition：abosolute 属性flexbox功能）？

解决方案

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

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

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

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

解决方案

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/

这篇关于Flexbox：元素阴影不适用于订单属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！