我一直在寻找一种为边框添加z-index的方法,但似乎找不到,所以我想在这里问问。
比如说,我有一个包含子div的父div。父div有一个边框,我希望该边框可以覆盖子div,但不希望父div也覆盖它。
使用边框无法完成该操作。
有趣的是,您可以使用 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-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>
::before
pointer-events: none;
(详见规范)代码的重要部分:
.parent {
position: relative;
...
}
.parent::before {
pointer-events: none;
position: absolute;
border: 1px solid #000;
...
}
义务的 "我看到你想通过方案A解决这个问题。方案A是不好的。取而代之的是方案B。"
简而言之,我建议:
伪元素:
A. .my-div searched-element:nth-of-type(1)
(即,searched-element
将是 p
或 h1
或 div
)
B. :first-child
C. :first-of-type
D. :last-child
margin-top: -10px
这样子元素就会向上移动
我真正推荐的解决方案 是使用子元素的负上边距以及一些 :first-child
伪类的变体。
特别针对我的情况,我实际上发现更容易的方法是将所有子 div 的边框从 border-top
切换到 border-bottom
,然后在该范围内使用 :last-child
。