Немного разочаровывающий, который я пытался обернуть вокруг себя в течение последних нескольких дней. Я использую тему WordPress, и в рамках этого у меня есть галерея изображений, которая автоматически скользит по серии фотографий с заголовком и небольшим значком, отображаемым на каждом слайде изображения.
I Выровняли изображения так, чтобы они располагались над текстом, используя следующие виды фрагментов для каждого значка слайда:
position: absolute;
width: 100%;
top: 55vh;
right: 30vw!important;
Вот CSS для текста:
position: absolute;
width: 100%;
bottom: 10vh;
left: 10vw !important;
И Кроме того, вот ссылка на промежуточную страницу: https://cnaportal.com/cem-annual-report-test-level-1/#
При первой загрузке страницы расстраивает то, что значки располагаются сверху текста, неправильно выровнены. Только когда вы слегка прокрутите страницу вниз, а затем прокрутите галерею изображений, значки будут отображаться правильно. Например, вот как выглядит одно изображение при начальной загрузке страницы:

А вот как это выглядит при небольшой прокрутке: 
Любой совет о том, как предотвратить / исправить это, будет очень признателен - я все еще оборачиваюсь основами, поэтому очень ценю любой совет!