我有一个用 div 构建的菜单，我希望菜单项具有较低层的背景，在本例中为正文。
结构:
body {
background-image: url(path/body.png);
}
#menu {
overflow: hidden;
width: 400px;
background-color: #fff;
}
.mm {
overflow: hidden;
float: left;
background-color: #fffl padding:5px 10px;
margin: 0 0 0 10px;
}
.mm.this {
background-color: transparent;
z-index: -9999;
}<body>
<div id="menu">
<div class="mm this">Home</div>
<div class="mm">Contact</div>
</div>
</body>看起来像这样:
你希望它看起来像这样:
最佳答案
有几种方法可以真正做到这一点。这是其中之一:
.mm.this {
position: relative;
z-index: -9999; /*remove this or set it to auto or a positive value*/
}
.mm.this:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
background: white;
width: 100%;
height: 1px;
}
这将创建一条水平线并将其定位在事件选项卡的底部。这会将下方的灰色边框与白线重叠。
关于html - 背景层元素下层(html/css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43786292/