如何让父元素边框覆盖子元素边框？CSS问题求助

嘿，这个问题我之前也踩过坑！负padding确实没用，因为CSS规范里padding的值不能是负数哦。咱们可以用几种方法实现父元素边框覆盖子元素的效果，我给你列两个最常用的：

方案一：用伪元素模拟父元素边框（最推荐） #

这种方法不会改变元素的原有布局，还能完美实现覆盖效果：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  /* 移除原来的border，交给伪元素生成 */
}
/* 用伪元素创建父元素的边框，放在子元素上方 */
.parent::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid red;
  z-index: 1; /* 确保伪元素层级高于子元素 */
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
  position: relative;
  z-index: 0; /* 让子元素处于伪元素下方 */
}

原理很简单：父元素的伪元素是绝对定位的，会完全覆盖父元素的区域，再通过z-index层级控制，让红色边框稳稳盖住绿色边框。

方案二：通过负margin+z-index调整层级 #

如果不想用伪元素，也可以直接调整子元素的位置和层级：

.parent {
  border: 1px solid red;
  position: relative;
  z-index: 1; /* 让父元素层级高于子元素 */
  display: inline-block; /* 让父元素自适应子元素宽度，避免占满整行 */
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
  margin: -1px; /* 让子元素边框和父元素边框完全重叠 */
  position: relative;
  z-index: 0;
}

这里通过margin: -1px让子元素的边框和父元素边框重叠，再用z-index确保父元素边框显示在上方。需要注意给父元素加display: inline-block，避免父元素默认占满整行影响布局。

个人更推荐第一种方案，因为伪元素的方式不会干扰原有元素的布局逻辑，兼容性也拉满～

内容的提问来源于stack exchange，提问作者Salma