Html CSS图像重叠定位

我特别想做的是，在网页上有蓝块和红块的比例，但也保持不变，不会像现在这样上下移动

这是一个gif演示，当按对角线缩放时，它可以实现我想要的效果，但垂直或水平缩放都会导致定位不准确

这是HTML

<div class="blockDisplay">
    <center><img src="greenBlock.png" class="greenBlock">
    <img src="redBlock.png" class="redBlock">
    <img src="blueBlock.png" class="blueBlock"></center>
</div>

---

试试这个，希望对你有帮助

CSS

.blockDisplay{
背景色：#444；
溢出：隐藏；
}
格林布洛克先生{
位置：相对位置；
宽度：58%；
z指数：2；
}
.红块{
位置：绝对位置；
最高：6%；
左：66%；
宽度：8vw；
z指数：4；
}
蓝洛克先生{
位置：绝对位置；
顶部：39vh；
左：76%；
宽度：40vw；
高度：10vw；
}
#divOnTop{z-index:1000；

---

试试这个，希望对你有帮助

CSS

.blockDisplay{
背景色：#444；
溢出：隐藏；
}
格林布洛克先生{
位置：相对位置；
宽度：58%；
z指数：2；
}
.红块{
位置：绝对位置；
最高：6%；
左：66%；
宽度：8vw；
z指数：4；
}
蓝洛克先生{
位置：绝对位置；
顶部：39vh；
左：76%；
宽度：40vw；
高度：10vw；
}
#divOnTop{z-index:1000；

---

那么这里是答案

.blockDisplay{
背景色：#444；
溢出：隐藏；
位置：相对位置；
}
格林布洛克先生{
宽度：58%；
z指数：2；
}
.红块{
位置：绝对位置；
最高：6%；
左：66%；
宽度：8vw；
z指数：4；
}
蓝洛克先生{
位置：绝对位置；
顶部：40vh；
左：77%；
宽度：23vw；
}

---

那么这里是答案

.blockDisplay{
背景色：#444；
溢出：隐藏；
位置：相对位置；
}
格林布洛克先生{
宽度：58%；
z指数：2；
}
.红块{
位置：绝对位置；
最高：6%；
左：66%；
宽度：8vw；
z指数：4；
}
蓝洛克先生{
位置：绝对位置；
顶部：40vh；
左：77%；
宽度：23vw；
}

嗨。试着给

位置：相对的
。blockDisplay
可能不能完全解决你的问题，但可能会把你放在正确的方向上。卢多维特的建议完美无瑕！它现在正是我想要的。非常感谢你！嗨。试着给
位置：相对的
。blockDisplay
可能不会Ludovit的建议工作完美无瑕！它现在正是我想要的。非常感谢！positon:relative添加到.blockDisplay。该代码正是我现在需要它做的。positon:relative添加到.blockDisplay。该代码正是我现在需要它做的
.blockDisplay {
      background-color: #444;
      overflow: hidden;
}
.greenBlock {
      position: relative;
      width: 58%;
      z-index: 2;
}
.redBlock {
      position: absolute;
      top: 6%;
      left: 66%;
      width: 8vw;
      z-index: 4;
}
.blueBlock {
      position: absolute;
      top: 40vh;
      left: 77%;
      width: 23vw;
}