我正在尝试在包含图像和文本的div的左上角放置一些文本。我可以使用CSS绝对定位使其正常工作，但是文本没有响应，并且会根据屏幕大小移动。我需要文本能够响应并根据屏幕大小进行调整，以使其相对于图像保持在相同位置。
我也在使用引导程序，我认为它没有作用，但是可能是我不了解的潜在问题。
这是我当前正在使用的代码：
的HTML
<div class="container-fluid">
<div class="col-md-12 d-flex jumbo">
<img class='img-fluid jumbo-image'
src= 'https://i.postimg.cc/8cXs8gZ9/working-horse.jpg' />
<h2 class='jumbo-text'>Jungers Farm</h2>
</div>
的CSS
.jumbo {
position: relative;
}
.jumbo-image {
margin-top: 85px;
box-shadow: 15px 15px grey;
}
.jumbo-text {
display: inline-block;
font-size: 3em;
color: #3386ff;
text-shadow: 2px 2px 5px red;
position: absolute; /* remove from document flow */
left: 5%; /* Left */
top: 18%; /* Top */
}
正如您在下面的代码笔中所看到的那样，文本没有响应，并且随着屏幕的变化在图像上移动。因此，我的定位不是左对齐的原因是：0％，顶部不是0％。但是当屏幕大于768px时，通常看起来或多或少就像我想要的。
以下是我尝试使用flexbox的尝试，但文本显示在屏幕右侧之外：
flexbox甚至有可能吗？如果不是，是否可以使用直接CSS绝对定位方法使文本具有响应性？
因此，如果我正确地理解了您的问题，那么问题在于，当更新视口大小时，图像将根据图像缩放，从而导致文本不再位于图像的所需部分。一种可能的解决方法是删除img标签，然后将其设置为父div的背景图像。然后，您可以绝对定位h2标签，无论视口大小如何，文本始终将保留在背景图像上。当然，使用此方法，您将必须显式设置父div的宽度和高度，或者使用padding-bottom技巧来设置高度。