CSS 图片重叠定位

Question

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

这是一个 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>

Answer 2

然后在这里作为答案

.blockDisplay {
      background-color: #444;
      overflow: hidden;
      position: relative;
}
.greenBlock {
      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;
}

<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 图片重叠定位

CSS image overlap positioning

html

css

image

resize

overlap