当父的overflown被隐藏时，显示父元素上方的伪元素

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>

第一种情况：正如所料。

第二种情况[溢出 - 隐藏]：顶部和底部边框的中间部分应为绿色。看起来圆圈不在其父div边框之上。有没有办法让它超越它？这里发生了什么事？ z-index会起作用吗？

Answer 1

为什么会这样？

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

  

<强>隐藏

     

如果需要，内容会被剪裁以适合内容框。没有滚动条   提供。

MDN网络文档 - 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>