如何使图片固定在含文本的Div内，不受屏幕分辨率变化影响？

嘿，我完全懂你遇到的这个困扰——不同分辨率下图片乱跑，写一堆@media又太繁琐，合成图片又没法改文本，确实挺闹心的。咱们来用更简洁的方案解决这个问题：

问题根源：缺失定位上下文 #

你当前的问题核心在于：#uC1用了position: absolute，但它的父元素.config没有设置定位上下文（也就是position: relative或者其他非static的定位）。这会导致图片的定位参考对象变成了整个文档（或者最近的有定位的父级），而不是你想要的.config容器，所以换屏幕分辨率时，图片自然就移位了。

解决方案1：修正绝对定位（快速修改现有代码） #

只需要给.config添加position: relative，让图片的绝对定位锚定在这个容器上，再调整百分比定位就能适配所有屏幕：

/* 给父容器添加定位上下文，让内部绝对定位元素以它为参考 */
.config {
  position: relative;
  /* 可根据需求添加内边距或宽度，确保容器有足够空间容纳内容 */
  padding: 20px 0;
}

.config-title {
  transform: rotate(-10deg);
  text-align: center;
  margin: 20px 0 0 0;
  position: relative;
}

#uC1 {
  background-image: url(/images/tinta2.png);
  width: 32px;
  height: 23px;
  position: absolute;
  /* 现在的百分比是相对于.config容器的尺寸，而非整个页面 */
  top: 5%;
  left: 60%;
}

修改后，图片的位置会始终相对于.config容器计算，不管屏幕分辨率怎么变，都不会跑出这个div的范围。

解决方案2：用Flex布局（更灵活的现代适配方案） #

如果你不想依赖绝对定位，Flex布局是更适配且易维护的选择，能轻松实现文本和图片的相对定位，天然适配各种屏幕：

<div class="config">
  <div class="config-content">
    <img id="uC1" />
    <div class="config-title">Settings</div>
  </div>
</div>

.config {
  width: 100%; /* 确保容器占满所需宽度 */
}

.config-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* 若需要微调图片位置，可作为定位上下文 */
}

.config-title {
  transform: rotate(-10deg);
  text-align: center;
  margin: 20px 0 0 0;
}

#uC1 {
  background-image: url(/images/tinta2.png);
  width: 32px;
  height: 23px;
  /* 用margin或align-self调整位置，相对于flex容器 */
  align-self: flex-start;
  margin-left: 40%; /* 对应原需求中left:60%的视觉效果 */
}

Flex布局会自动根据容器尺寸调整内部元素位置，后期调整也更灵活，不用再为不同分辨率写一堆媒体查询。

补充小提示 #

• 如果需要图片和文本更精准的相对位置，可以给.config-content设置position: relative，再给图片用position: absolute（此时锚定的是.config-content），结合Flex的文本居中效果会更可控。
• 尽量用百分比、Flex弹性属性代替固定像素值定位，适配性会更强。

内容的提问来源于stack exchange，提问作者Bosco