在CSS 2.1中,z-index仅适用于定位元素,并指定两个不同的东西:
- 当前堆叠上下文中框的堆栈级别.
- 框是否建立堆叠上下文.
但Flexbox说:
柔性物品油漆完全一样直列块[CSS21] ,不同的是
order改性的文档顺序代替原始文档顺序的使用,并且z-index比其它值auto创建一个堆叠内容即使position是static.
然后,与CSS2.1不同,z-index在未定位的flex项上设置为某个整数会创建堆叠上下文.
但是,我没有看到任何应该是此堆叠上下文的堆栈级别的定义.
类似的情况是opacity,它也可以在非定位元素上创建堆叠上下文.但在这种情况下,堆栈级别被正确指定为0:
如果未定位不透明度小于1的元素,则实现必须在其父堆叠上下文中以相同的堆叠顺序绘制它创建的层,如果它是带有
z-index: 0和的定位元素,则使用该堆叠顺序opacity: 1.
在我看来,这些选择是合理的:
z-index根据以下测试,Firefox和Chrome都是第一个选择.
.container {
display: flex;
padding-left: 20px;
}
.item {
padding: 20px;
background: #ffa;
align-self: flex-start;
margin-left: -20px;
}
.item:nth-child(even) {
background: #aff;
margin-top: 40px;
}
.za::after{ content: 'z-index: auto'; }
.z0 { z-index: 0; } .z0::after{ content: …我正在尝试有两列,一个是可以扩展并与另一列重叠的菜单.但是我使用了一个flex元素来包装这些列,我的菜单扩展到了另一个元素后面,即使有更大的元素z-index.
渲染是这样的:
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
nav {
height: 100%;
width: 8em;
background-color: black;
z-index: 1;
}
.navbox {
box-sizing: border-box;
background-color: black;
color: white;
height: 4em;
width: 100%;
text-align: center;
line-height: 4em;
border-top: 1px dotted #99baef;
transition: all 1s;
}
.navbox:hover {
width: 130%;
border-top: none;
background-color: #4a77c4;
color: black;
}
.container {
padding: 1em;
}
a {text-decoration: inherit;}<div class="main">
<div class="maincolumn">
<nav>
<a href="">
<div …我想要在div1上面div2.我尝试z-index但它不起作用.
我试过这段代码:
div {
width: 100px;
height: 100px;
}
.div1 {
background: red;
z-index: 1;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 2
}<div class="div1"></div>
<div class="div2"></div>我试图创建一个使用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>可以在不使用poasition:abosolute属性的情况下执行此操作(仅限Flexbox功能)？