我试图有两列,一列是可以展开并重叠另一列的菜单。但我使用了一个 Flex 元素来包裹这些列,并且我的菜单展开了behind另一个元素,即使具有更大的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 class="navbox">
Nav 1
</div>
</a>
<a href="">
<div class="navbox">
Nav 2
</div>
</a>
</nav>
</div>
<div class="maincolumn">
<div class="container">
<h2>Title</h2>
<p>This is a text.</p>
</div>
</div>
</div>
看?我希望我的菜单在展开时与页面的其余部分重叠。我怎样才能做到这一点?
The z-index
属性仅影响具有非静态(默认)位置值的元素,或者是弹性项目(的直接子元素)display: flex
or display: inline-flex
).
有两种选择可以使z-index
在你的情况下工作:
-
Set the z-index
到 1 号.maincolumn
,这是一个弹性盒项目:
.maincolumn:first-child {
z-index: 1;
}
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
.maincolumn:first-child {
z-index: 1;
}
nav {
height: 100%;
width: 8em;
background-color: black;
}
.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 class="navbox">
Nav 1
</div>
</a>
<a href="">
<div class="navbox">
Nav 2
</div>
</a>
</nav>
</div>
<div class="maincolumn">
<div class="container">
<h2>Titre</h2>
<p>This is a text.</p>
</div>
</div>
</div>
or
-
Set position: relative
to nav
:
nav {
position: relative;
height: 100%;
width: 8em;
background-color: black;
z-index: 1;
}
.main {
font-family: 'Open Sans', Helvetica, sans-serif;
display: flex;
background-color: #99baef;
}
nav {
position: relative;
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 class="navbox">
Nav 1
</div>
</a>
<a href="">
<div class="navbox">
Nav 2
</div>
</a>
</nav>
</div>
<div class="maincolumn">
<div class="container">
<h2>Titre</h2>
<p>This is a text.</p>
</div>
</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)