CSS中，使用div元素覆盖其父级元素是一种非常常见的技术。通过将div的大小、位置和背景颜色设置为合适的值，可以让div完全覆盖其父级元素。

.parent {
    position: relative;
}
.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.5);
}

在以上代码中，我们通过给父级元素添加position: relative属性来设定它的定位上下文。然后，我们为要覆盖父级元素的div添加position: absolute属性，以便将其脱离文档流。接着，通过设置left、top、width和height属性的值，我们可以让div完全覆盖其父级元素。最后，我们还可以通过设置background-color属性来让div的背景颜色变得不透明，从而完全覆盖父级元素。

但需要注意的是，覆盖父级元素并不意味着它将永远处于最顶层。当页面上有多个覆盖层时，它们的层级关系是由它们在HTML文档中的顺序来决定的。在这种情况下，我们可以通过设置z-index属性来决定覆盖层的顺序。

.parent {
    position: relative;
}
.overlay1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.5);
    z-index: 1;
}
.overlay2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: rgba(0, 255, 0, 0.5);
    z-index: 2;
}

在以上代码中，我们又添加了一个overlay2的div，它覆盖了overlay1的div。但我们通过设置z-index属性，将overlay2的层级设置为更高的值，从而让它处于更高的层级，使它处于最顶层。

总之，通过使用CSS的position、z-index和背景色属性，我们可以很方便地实现让div元素覆盖其父级元素的效果。但需要注意的是，在多个覆盖层叠加的情况下，我们需要合理地使用z-index属性，以便让它们按照我们所期望的层级关系出现在页面上。