我正在尝试使用 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 http://jsfiddle.net/cm7L6fht/
不使用也可以做到这一点poasition:abosolute属性（仅具有弹性盒功能）？
Use the z-index http://www.w3.org/TR/CSS2/visuren.html#z-index用于按所需顺序堆叠元素的属性。
nav {
order:0;
z-index:2;
}
这是一个演示：http://jsfiddle.net/Lfaezsek/1/ http://jsfiddle.net/Lfaezsek/1/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
