如何使用 ::After 解决分层问题

Question

我正在尝试使用::after 创建一个堆叠的盒子外观。我在 codepen (https://codepen.io/nk-creative/pen/vqvVJL) 中创建了代码，但是当我将代码放在我正在处理的 Wordpress 网站上时，我无法以相同的顺序实现相同的堆叠效果 (http://aptw.nk-creative.com/)

我在 codepen (https://codepen.io/nk-creative/pen/vqvVJL) 中创建了代码。

<div class="offset-boxes">
  <h4>47 Locations & Personalized Plans. Meet Your New Partner.</h4>
</div>


.offset-boxes {
    position: relative;
    max-width: 300px;
    height: 290px;
    background-color: lightpink;
  margin-top: 20px;
  padding: 25px
}

.offset-boxes::after {
    content: "";
    width: 100%;
  right: -40px;
  top: -40px;
    height: 100%;
    background-color: red;
    position: absolute;
    z-index: -1; 
}

我希望代码看起来像 codepen，但 WP 网站却没有。

Answer 1

看起来你的::after 伪元素被掩埋了。您可以将此添加到您的 CSS 到 .offset-boxes 的父元素中：

.textwidget {
    position: relative;
    z-index: 1;
}