Блог

Пояснительный рисунок У меня есть этот текст, который является элементом уровня блока, под ним куча картинок, организованных так, как вы можете видеть. проблема возникает, когда я пытаюсь полностью расположить его по тексту, он идет туда, куда я хочу, но затем при увеличении и уменьшении масштаба текст меняет свое положение вверх. есть ли способ стабильно размещать текст на изображении (div)? без этого перемещения текста вверх / вниз изображения вообще не перемещаются, все это стабильно, но только этот текст.

 .Lower {
    max-width: 450px;
    margin-top: 50px;

}
  

      <div>
       <div>
                <P class="Lower">
                about lorem 150
                </P>
            </div>
            <div><img id="A1" src="./imgs/About/Aboutria/A1.jpg" alt=""></div>
            <div><img id="A2" src="./imgs/About/Aboutria/A2.jpg" alt=""></div>
            <div><img id="A3" src="./imgs/About/Aboutria/A3.jpg" alt=""></div>
            <div><img id="A4" src="./imgs/About/Aboutria/A4.jpg" alt=""></div>
            <div><img id="A5" src="./imgs/About/Aboutria/A5.jpg" alt=""></div>
            <div><img id="A6" src="./imgs/About/Aboutria/A6.jpg" alt=""></div>
            <div><img id="A7" src="./imgs/About/Aboutria/A7.jpg" alt=""></div>
            <div><img id="A8" src="./imgs/About/Aboutria/A8.jpg" alt=""></div>


        </div>
  

Если у вас такая структура

 <div>
    <div class="caption">Here is a picture of a bird</div>
    <img src="...."/>
</div>
  

использование css position: absolute будет инвариантно к масштабированию, если div оно инвариантно к масштабированию (как вы описываете, что у вас есть с изображениями). absolute помещает его относительно ближайшего предка, то есть вашего верхнего уровня div .

 .caption {
  position: absolute;
  top: 10px;
  left: 20px;
}