CSS：解决父元素伪类元素展示层级高于子元素问题

efframia

于 2024-08-20 10:24:59 发布

阅读量159

点赞数 2

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_43150721/article/details/141351186

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题现象

用父元素的伪类元素实现了类似笔刷的背景样式，但是覆盖在了子元素文字之上，如下图所示：
在这里插入图片描述
此时的css样式：

.title-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;

  position: relative;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background: linear-gradient(to right, @main-color, transparent);
  }

  .main-title {
    font-size: 16px;
  }
  .sub-title {
  }
}

解决方法

为子元素补充上position: relative即可：

.title-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;

  position: relative;

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background: linear-gradient(to right, @main-color, transparent);
  }

  .main-title {
  	position: relative;// 为主标题添加position: relative
    font-size: 16px;
  }
  .sub-title {
  	position: relative;// 为副标题添加position: relative
  }
}