如何解决position:absolute的HTML元素被父元素边框穿透的问题？

问题核心是父元素的上边框与绝对定位的X元素顶部重叠，导致边框显示在X元素上方，形成穿透视觉。以下两种方案可解决：

方案一：偏移X元素覆盖边框 #

调整X元素的top值，让它向上偏移与父元素边框宽度一致的距离，用自身背景盖住边框：

.X{
    background-color: black;
    position: absolute;
    left: 47.2%;
    color:white;
    top: -0.1rem; /* 向上偏移0.1rem，匹配父元素边框宽度 */
    padding: 0.1rem;
    height: 3rem;
    font-size: 3rem;
    font-weight: 700;
}

方案二：给父元素添加上内边距 #

给父元素设置上内边距，让子元素与边框拉开距离，同时用box-sizing:border-box保证元素总高度不变：

<section style="border:solid 0.1rem black; height: 600px;position:relative; margin-top:1rem; padding-top:0.1rem; box-sizing: border-box">
    <div class="X">
     X 
    </div>
</section>

内容的提问来源于stack exchange，提问作者Perez Monge Santiago