Css 如何定位：在具有z-index+；位置相对集？

我试图用伪元素创建两种颜色的边框。但如果我将z-index添加到父“.d”中，它将停止工作。有没有办法让“.d”上的“位置：相对”和“z-索引”起作用

.d{
背景色：#000；
高度：100px；
宽度：100px；
/*z指数：1000*/
/*如果添加z索引，则停止工作*/
位置：相对位置；
}
d:以前{
内容：“；
边框：#0000ff 4px虚线；
背景色：#ff0000；
顶部：-2px；
左：-2px；
底部：-2px；
右：-2px；
位置：绝对位置；
z指数：-1；
}

---

您可以使用两个伪元素，一个带有实心边框，另一个带有虚线。实心边框位于虚线边框下方，无需使用负数

z-index

overflow:hidden

可以在父级上使用，在保持笔划长度的同时剪切边框宽度

.d{
背景色：#000；
高度：100px；
宽度：100px；
位置：相对位置；
z指数：100；
/*隐藏是为了切断多余的边界*/
溢出：隐藏；
}
d:以前，
d:之后{
内容：“；
顶部：-2px；
左：-2px；
底部：-2px；
右：-2px；
位置：绝对位置；
}
d:以前{
边框：#F00 4px实心；
}
d:之后{
边框：#00a3ff 4px虚线；
}

---

你能给我一张期望的图片吗？你可能对