css设置一个div下面有两个子div 两个div叠加 背景色叠加

当你想要在CSS中让一个`<div>`元素下有两层子`<div>`，并且这两层子`<div>`的颜色能够相互覆盖（即颜色叠加），你需要利用伪元素（`:before`和`:after`）或者是定位属性（如`position`和`z-index`）。这里有一个简单的例子：

.parent-div {
  position: relative; /* 给父级 div 设置定位 */
}

.child-div1 {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 50%;
  background-color: red; /* 子div1的背景色 */
}

.child-div2 {
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 50%;
  background-color: blue; /* 子div2的背景色，会覆盖到div1的一半 */
  transform: translateY(-50%); /* 使用transform调整位置 */
}

/* 或者你可以使用伪元素实现颜色叠加 */
.parent-div::before {
  content: "";
  display: block;
  height: 50%;
  background-color: red;
}

.parent-div::after {
  content: "";
  display: block;
  height: 50%;
  background-color: blue;
  position: absolute;
  bottom: 0;
}

在这个例子中，`.child-div1`和`.child-div2`都是绝对定位的，并且`.child-div2`的位置是在`.child-div1`顶部50%，所以它们会相互叠加。如果需要颜色完全覆盖，可以适当调整子元素的高度。