文字和div重叠部分颜色改变 非父子关系 demo

这个需求可以通过使用 CSS 伪元素和绝对定位来实现。具体实现步骤如下：

1. 创建两个 div 元素，分别为文字和背景 div，并将它们放在同一级别的父元素中。
2. 给文字 div 添加 z-index 属性，使其在层叠顺序上在背景 div 的上面。
3. 给背景 div 添加 position: relative; 属性，为伪元素绝对定位提供参考。
4. 为背景 div 添加伪元素 ::before，并设置其宽度、高度和背景颜色等样式。同时设置其 position: absolute; 和 z-index: -1;，使其位于背景 div 的下面。
5. 设置伪元素的 top 和 left 值，使其与文字 div 重叠部分对齐。
6. 完成。

以下是一个具体的示例代码：

HTML 代码：

<div class="container">
  <div class="text">Hello World!</div>
  <div class="background"></div>
</div>

CSS 代码：

.container {
  position: relative;
  width: 300px;
  height: 100px;
}

.background {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
}

.text {
  position: relative;
  z-index: 1;
  font-size: 30px;
}

.background::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 50%;
  height: 100%;
  background-color: #ff0000;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

在这个示例中，我们使用了一个红色的伪元素来实现文字和背景重叠部分的颜色改变。你可以根据自己的需要调整伪元素的样式，实现不同的效果。