[英]Change z-index order on a child element
我在子元素中的z-index值有问题。 结构看起来像这样:
#header { position: relative; z-index: 2; width: 100%; height: 15vh; display: block; margin: 0 auto; background-color: white; color: #44a9ff; padding: 0; overflow: hidden; border-bottom: 3px solid #44a9ff; -webkit-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75); box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75); } #main { position: relative; z-index: 1; width: 100%; height: 75vh; display: block; margin: 0 auto; overflow: hidden; padding: 0; background: url('img/main_bg.jpg') no-repeat center center; background-size: cover; border-bottom: 3px solid #44a9ff; } #box { position: relative; z-index: 10; width: 40%; height: 38vh; background-color: #44a9ff; float: right; color: white; display: block; overflow: hidden; }
<div id="nav"> <ul> <li><a href="#">..</a></li> <li><a href="#">..</a></li> </ul> </div> <div id="main"> <div id="box"> </div> </div>
元素#nav
Z索引为2,因为底部有框阴影。 #main
Z索引为1,因为当它更高时,阴影不可见。 并且比#box
z索引为3,因为我需要它覆盖#nav
阴影。 但是它可能具有#main
的z-index值,因此没有覆盖它。 我该如何解决?
尝试将#box
从#main
移出,并为其提供自定义的CSS代码,以将其移到正确的位置
<div id="nav">
<ul>
<li><a href="#">..</a></li>
<li><a href="#">..</a></li>
</ul>
</div>
<div id="box">
</div>
<div id="main">
</div>
尝试从#main
取出#box
并将其absolute
设置在上方,并使用right
坐标和top
坐标:
#header { position: relative; z-index: 2; width: 100%; height: 15vh; display: block; margin: 0 auto; background-color: white; color: #44a9ff; padding: 0; overflow: hidden; border-bottom: 3px solid #44a9ff; -webkit-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75); box-shadow: 8px 1px 41px 0px rgba(0, 0, 0, 0.75); } #main { position: relative; z-index: 1; width: 100%; height: 75vh; display: block; margin: 0 auto; overflow: hidden; padding: 0; background: url('img/main_bg.jpg') no-repeat center center; background-size: cover; border-bottom: 3px solid #44a9ff; background: green; } #box { /* set it absolute */ position: absolute; /* tweak coordinates to your benefit */ right: 8px; top: 19vh; z-index: 3; width: 40%; height: 38vh; background-color: #44a9ff; color: white; display: block; overflow: hidden; }
<div id="header"> <div id="nav"> <ul> <li><a href="#">..</a> </li> <li><a href="#">..</a> </li> </ul> </div> </div> <div id="main"></div> <div id="box"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.