Pau*_*iro 13 html css z-index css3 flexbox
根据flexbox规范:
..4.3.Flex项目Z-Ordering,...和
z-index除了auto创建堆叠上下文之外的值, 即使position是static.
所以,我认为z-index/ opacity应该像往常一样使用flexbox但是当我将它应用于这个HTML/CSS时它不起作用(我的目标是放在创建两个层.header之上.core):
.header {
opacity: 0.5;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
.headerLeft {
z-index: inherit;
background-color: blue;
text-align: right;
align-self: stretch;
flex: 2 1 250px;
}
.headerCenter {
z-index: inherit;
background-color: red;
text-align: right;
align-self: stretch;
flex: 1 1 175px;
}
.headerRight {
z-index: inherit;
background-color: green;
text-align: right;
align-self: stretch;
flex: 1 1 100px;
}
.core {
z-index: 0;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
}
.coreItem {
align-self: stretch;
flex: 1 1 400px;
}<body>
<div class="header">
<div class="headerLeft">Left</div>
<div class="headerCenter">Center</div>
<div class="headerRight">Right</div>
</div>
<div class="core">
<div class="coreItem">Core1</div>
<div class="coreItem">Core2</div>
<div class="coreItem">Core3</div>
<div class="coreItem">Core4</div>
<div class="coreItem">Core5</div>
<div class="coreItem">Core6</div>
</div>
</body>我在flex属性上使用了正确的前缀.我不明白为什么它不起作用.
Mic*_*l_B 16
就像您在问题中所写的那样,元素不需要定位为z-index在Flex容器中工作.
Flex项目z-index甚至可以参与堆叠顺序position: static,但对于z-index仅适用于定位元素的其他CSS框模型(Grid除外)则不然.
Flex的项目漆完全一样内嵌块,除了
order修饰的文档顺序代替原文档顺序使用,而z-index其它值比auto创建堆叠环境,即使position是static.
原因z-index是你的代码不能正常工作,div.header而div.core不是flex项目.他们是儿童body,但body不是灵活容器.
为了让z-index在这里工作,你需要申请display: flex到body.
将其添加到您的代码中:
body {
display: flex;
flex-direction: column;
}
更多细节:https://stackoverflow.com/a/35772825/3597276