当父元素的溢出被隐藏时，显示伪元素在父元素之上

Question

div {
  margin: 50px;
  position: relative;
  background-color: red;
  width: 200px;
  height: 50px;
  border: 2px solid black; 
}

div::after {
  content: '';
  position: absolute;
  background-color: green;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  top: -25px;
  left:50px;

  border: 2px solid black; 
}

div.overflow-hidden {
  overflow: hidden;
}

<div>1st</div>
<div class="overflow-hidden">2nd</div>

第一种情况：如预期所述。

第二种情况[overflow-hidden]：顶部和底部边框的中间部分应为绿色。看起来圆形不在其父元素 div 的边框上方。有没有办法使它在上面？这里发生了什么？ z-index 会起作用吗？

- amitdigga

---

z-index不起作用。 - chander shekhar

当父元素设置为overflow:hidden时，z-index不起作用； - Chandra Shekhar

Answer 1

为什么会出现这种情况？

这是因为 overflow: hidden; 将内容裁剪到内容框中。

hidden

如果需要，将内容裁剪以适合内容框。不提供滚动条。

MDN Web 文档 - https://developer.mozilla.org/en/docs/Web/CSS/overflow

可以在下面的第一个示例中看到这一点，因为我已经将 border 更改为透明。

你可以怎么做？

解决这个问题的一种方法是使用绝对定位的伪元素应用边框，而不是应用于包含的 div 中。

div {
  background-color: red;
  height: 50px;
  margin: 50px;
  overflow: hidden;
  position: relative;
  width: 200px;
}

div::after {
  background-color: green;
  border: 2px solid black;
  border-radius: 100%;
  content: '';
  height: 100px;
  left: 50px;
  position: absolute;
  top: -25px;
  width: 100px;
}

div.overflow-with-border {
  border: 2px solid transparent;
}

div.overflow-with-pseudo {
  padding: 2px;
}

div.overflow-with-pseudo::before {
  border: 2px solid black;
  box-sizing: border-box;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

<div class="overflow-with-border">1st</div>
<div class="overflow-with-pseudo">2nd</div>

- Hidden Hobbes