Html 在子div上创建覆盖

我正在尝试创建一个覆盖，其宽度为父级宽度的50%，高度为100%。但它不起作用，怎么了

.parent{
填充：100px 0px；
背景：黑色；
}
.孩子{
宽度：100%；
身高：100%；
位置：相对位置；
填充：0px 50px；
}
.儿童h1{
颜色：红色；
}
.覆盖{
宽度：50%；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
背景色：rgba（255、255、255、0.8）；
}

标题

您在

.overlay

类中添加了两次

宽度。我想第二个是高度

那是你要找的吗


.parent{
填充：100px 0px；
背景：黑色；
}
.孩子{
框大小：边框框；
宽度：100%；
身高：100%；
位置：相对位置；
填充：0px 50px；
}
.儿童h1{
颜色：红色；
}
.覆盖{
宽度：50%；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
背景色：rgba（255、255、255、0.8）；
}

标题

您希望内容相对于的元素应该具有
位置：relative样式。（将其添加到父级并从子级中删除）

您在
.overlay
中使用了两次
宽度（第二个应该是
高度
）



.parent{
位置：相对位置；
填充：100px 0px；
背景：黑色；
}
.孩子{
宽度：100%；
身高：100%；
填充：0px 50px；
}
.儿童h1{
颜色：红色；
}
.覆盖{
宽度：50%；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
背景色：rgba（255、255、255、0.8）；
}

标题
你必须对家长玩身高
100vh


.parent{
宽度：100%；
背景：黑色；
高度：100vh；
}
.孩子{
宽度：100%；
身高：100%；
位置：相对位置；
填充：0px 50px；
}
.儿童h1{
颜色：红色；
}
.覆盖{
宽度：50%；
位置：绝对位置；
顶部：0px；
左：0；
身高：100%；
背景色：rgba（255、255、255、0.8）；
z指数：1；
}

标题

.parent{
填充：100px 0px；
背景：黑色；
高度：100vh；
宽度：100%；
}
.孩子{
宽度：100%；
身高：100%；
位置：绝对位置；
填充：0px 50px；
排名：0；
}
.儿童h1{
颜色：红色；
}
.覆盖{
宽度：50vh；
位置：绝对位置；
排名：0；
左：0；
高度：100vh；
不透明度：0.5；
背景色：rgba（255、255、255、0.8）；
}

标题
您定义了两次宽度，其中一个应该是高度