我一直在寻找一种将 z-index 添加到边框的方法，但似乎找不到，所以我想我会在这里问。
假设我有一个带有父 div 的 div 。父级有一个边框，我希望该边框与子级 div 重叠，但我不希望父级与它重叠。
你不能用边框来做到这一点。
不过有趣的是，你can用一个做outline
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
border:12px solid #663399;
outline: 12px solid red;
padding:25px
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
<div class="parent">
<div class="child"></div>
</div>
其他选项
使用伪元素
1.带边框的伪元素
需要一些额外的变换才能推动到位。
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
padding: 25px;
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
.absolute::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border: 12px solid red;
}
<div class="parent absolute">
<div class="child"></div>
</div>
2.带有box-shadow的伪元素
* {
box-sizing: border-box;
}
.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
padding: 25px;
}
.child {
width: 220px;
height: 100px;
background: lightblue;
}
.shadow::after {
content: '';
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
box-shadow: 0 0 0 12px red;
}
<div class="parent shadow">
<div class="child"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
