html - CSS图片重叠定位

Question

我特别想做的是让蓝色 block 和红色 block 随网页缩放，但也保持原位，不会像现在这样上下移动。

这是一个 gif 演示它在对 Angular 线缩放时做了我想要的，但垂直或水平缩放会导致偏离定位。

Imgur link to demo 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 {
      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;
}

Answer 1

试试这个希望它对你有帮助。

CSS

.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: 39vh;
      left: 76%;
      width: 40vw;
      height: 10vw;


}
#divOnTop { z-index: 1000; 

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