#html #css
#HTML #css
Вопрос:
Пояснительный рисунок У меня есть этот текст, который является элементом уровня блока, под ним куча картинок, организованных так, как вы можете видеть. проблема возникает, когда я пытаюсь полностью расположить его по тексту, он идет туда, куда я хочу, но затем при увеличении и уменьшении масштаба текст меняет свое положение вверх. есть ли способ стабильно размещать текст на изображении (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>
Ответ №1:
Если у вас такая структура
<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;
}
Комментарии:
1. тем не менее, текст прыгает вверх и вниз, и он не фиксируется в своем положении, кажется, как только я перемещаю текст вниз, используя top / down в другой div с изображениями, эта проблема начинает появляться.
2. Вот рабочий пример того, что я сделал codesandbox.io/s/unruffled-sun-6c504 Обратите внимание на тот факт, что класс для перемещения текста должен находиться на том же уровне, что и изображения.