Html 两个独立的DIV'；具有底层图像的s不'；不要浮到右边

我想把这页分成两半。一面是电脑显示器的图像，上面覆盖着一层蓝色透明的覆盖层。当鼠标悬停在上方时，该区域将变得更亮。同样的是在右边的一个不同的图像（一个音乐手稿）。然而，这在实践中不起作用，只会在左侧折叠成一个DIV块

代码：

html，正文{
背景色：黑色；
身高：100%；
宽度：100%；
利润率：0%；
}
div.leftImage{
/*设置定位：*/
显示：块；
浮动：左；
宽度：50%；
身高：100%；
z指数：0；
位置：绝对位置；
/*设置背景：*/
背景图像：url（“https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
背景位置：45%；
}
右图像分区{
/*设置定位：*/
显示：块；
浮动：对；
宽度：50%；
身高：100%；
位置：绝对位置；
z指数：0；
/*设置背景：*/
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
背景位置：中心；
}
左分区{
/*设置定位：*/
显示：块；
浮动：左；
宽度：50%；
身高：100%；
位置：绝对位置；
z指数：1；
/*设置背景：*/
背景色：rgba（0、150、255、0.5）；
过渡：背景色0.25秒；
}
左分区：悬停{
背景色：rgba（0、150、255、0.8）；
}
右分区{
/*设置定位：*/
显示：块；
浮动：对；
宽度：50%；
身高：100%；
位置：绝对位置；
z指数：1；
/*设置背景：*/
背景色：rgba（204,0,0,0.5）；
过渡：背景色0.25秒；
}
右分区：悬停{
背景色：rgba（204,0,0,0.8）；
}

测试

测试

如果使用的是

位置：绝对

，则像

float:left

这样的布局属性不会有任何效果

相反，使用

顶部

、

左侧

、

右侧

和

底部

属性来控制绝对定位的元素：

html，正文{
背景色：黑色；
身高：100%；
宽度：100%；
利润率：0%；
}
div.leftImage{
/*设置定位：*/
z指数：0；
位置：绝对位置；
排名：0；
左：0；
右：50%；
底部：0；
/*设置背景：*/
背景图像：url（“https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
背景位置：45%；
}
右图像分区{
/*设置定位：*/
z指数：0；
位置：绝对位置；
排名：0；
左：50%；
右：0；
底部：0；
/*设置背景：*/
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
背景位置：中心；
}
左分区{
/*设置定位：*/
z指数：1；
位置：绝对位置；
排名：0；
左：0；
右：50%；
底部：0；
/*设置背景：*/
背景色：rgba（0、150、255、0.5）；
过渡：背景色0.25秒；
}
左分区：悬停{
背景色：rgba（0、150、255、0.8）；
}
右分区{
/*设置定位：*/
z指数：1；
位置：绝对位置；
排名：0；
左：50%；
右：0；
底部：0；
/*设置背景：*/
背景色：rgba（204,0,0,0.5）；
过渡：背景色0.25秒；
}
右分区：悬停{
背景色：rgba（204,0,0,0.8）；
}

测试

测试

如果使用的是

位置：绝对

，则像

float:left

这样的布局属性不会有任何效果

相反，使用

顶部

、

左侧

、

右侧

和

底部

属性来控制绝对定位的元素：

html，正文{
背景色：黑色；
身高：100%；
宽度：100%；
利润率：0%；
}
div.leftImage{
/*设置定位：*/
z指数：0；
位置：绝对位置；
排名：0；
左：0；
右：50%；
底部：0；
/*设置背景：*/
背景图像：url（“https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
背景位置：45%；
}
右图像分区{
/*设置定位：*/
z指数：0；
位置：绝对位置；
排名：0；
左：50%；
右：0；
底部：0；
/*设置背景：*/
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
背景位置：中心；
}
左分区{
/*设置定位：*/
z指数：1；
位置：绝对位置；
排名：0；
左：0；
右：50%；
底部：0；
/*设置背景：*/
背景色：rgba（0、150、255、0.5）；
过渡：背景色0.25秒；
}
左分区：悬停{
背景色：rgba（0、150、255、0.8）；
}
右分区{
/*设置定位：*/
z指数：1；
位置：绝对位置；
排名：0；
左：50%；
右：0；
底部：0；
/*设置背景：*/
背景色：rgba（204,0,0,0.5）；
过渡：背景色0.25秒；
}
右分区：悬停{
背景色：rgba（204,0,0,0.8）；
}

测试

测试

这只是另一个简单的选择，可以完全避免浮动。使用flexbox，您不需要浮动或定位元素。希望有帮助：）

html，
身体{
背景色：黑色；
身高：100%；
宽度：100%；
保证金：0；
}
.fc{
显示器：flex；
宽度：100%；
身高：100%；
}
.leftImage{
宽度：50%；
背景图像：url（“https://images.pexels.com/photos/270360/pexels-photo-270360.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb");
背景位置：45%；
}
.rightImage{
宽度：50%；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/9/9d/BWV605.png");
背景位置：中心；
}
左分区{
宽度：50%；
身高：100%；
位置：绝对位置；
背景色：rgba（0、150、255、0.5）；
过渡：ba