CSS图像重叠定位-Java 学习之路

我特别想做的是，网页上有蓝色块和红色块，但也保持原位，不像现在那样上下移动 .

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

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>

回复于 2024-04-29T05:09:59+08:00

试试这个希望它对你有所帮助 .

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>

回复于 2024-04-29T05:09:59+08:00

CSS图像重叠定位

2 回答

相关问题