如何使用 ::After 修复分层问题

Question

我正在尝试使用 ::after 创建堆叠的盒子外观。我在代码笔中创建了代码 (https://codepen.io/nk-creative/pen/vqvVJL), but when I place the code on the Wordpress site I am working on, I can't achieve the same stacking effect in the same order (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;
}

如何使用 ::After 修复分层问题

How to Fix Layering Issue with ::After

css

layer

pseudo-element