CSS-позиционирование с перекрытием изображений - PullRequest
Новая
       40

CSS-позиционирование с перекрытием изображений

0 голосов
/ 10 декабря 2018

Что я специально хочу сделать, так это иметь синий блок и шкалу красного блока вместе с веб-страницей, но также оставаться на месте, не сдвигаясь вверх и вниз, как сейчас.

Вот рисунок, демонстрирующий, что он выполняет то, что мне нужно, при масштабировании по диагонали, но масштабирование по вертикали или горизонтали приводит к смещению.

Imgur ссылка на демонстрационную версию 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 ]

0 голосов
/ 11 декабря 2018

Тогда вот это как ответ 

.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>
0 голосов
/ 10 декабря 2018

Попробуйте, надеюсь, это полезно для вас.

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>
...