大佬教程收集整理的这篇文章主要介绍了css – Z-index不适用于flex元素?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
渲染是这样的:
.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>
看到?扩展时,我希望我的菜单与页面的其余部分重叠.我怎样才能做到这一点?
Flex项目遵循z-index顺序,但您不是将z-index应用于flex-items而是应用于它们的后代.
从w3c flexbox spec开始:
因此,为了使其工作,您应该将更大的z-index应用于您的第一个Flex项目.演示:
.main { font-family: 'Open Sans',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>Title</h2> <p>This is a text.</p> </div> </div> </div>
以上是大佬教程为你收集整理的css – Z-index不适用于flex元素?全部内容,希望文章能够帮你解决css – Z-index不适用于flex元素?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。