html - 响应式地相对于文本放置图像

Question

我让 h1 以 div 为中心
文本对齐:居中； 行高:150px； 垂直对齐:顶部；

现在我想将 img 例如放在文本的左上角。 Ofc 我希望它在窗口改变大小时不移动。它必须始终位于文本的一 Angular 。
我尝试将 position: absolute/fixed 设置为 img，然后使用 top 和 left 百分比值进行操作，但 img 相对于text (h1) 当我改变窗口大小时。

我是 CSS(也是 HTML)的新手，我不明白屏幕上发生了什么，也不知道如何解决这个问题。

.container {
  margin: auto;
}
.logo {
  height: 150px;
  text-align: center;
  line-height: 150px;
  vertical-align: top;
  font-size: 50px;
  background-image: url(../img/forest.jpeg);
  background-position: 30% 20%;
}
.logo h1 {
  font-family: Coiny-Regular;
  color: skyblue;
}
.logo img {
  position: fixed;
  height: 2.5em;
  top: 7%;
  left: 30%;
}

<div class="container">
  <div class="logo">
    <h1> Example </h1>
    <img src="img/image.png" />
  </div>
</div>

Answer 1

img:

• 使用position: absolute
• 将它放在 h1
中

h1:

• 让它display: inline-block;
• 有position: relative(将使img相对于h1的绝对位置)

h1 上的display: inline-block; 将使其边界框与其内容相匹配，并使图像的绝对位置能够保持在一个准确的位置.

.container {
  margin: auto;
}
.logo {
  height: 150px;
  text-align: center;
  line-height: 150px;
  vertical-align: top;
  font-size: 50px;
  background-image: url(../img/forest.jpeg);
  background-position: 30% 20%;
}
.logo h1 {
  font-family: Coiny-Regular;
  color: skyblue;
  position: relative;
  display: inline-block;
}
.logo img {
  position: absolute;
  top: 0;
  left: 70px;
}

<div class="container">
  <div class="logo">
    <h1> Example
      <img src="http://placehold.it/50" />
    </h1>
  </div>
</div>