html - 考虑缩放时如何在html css中实现绝对文本位置？

Question

我一直在尝试解决这个问题，我想要文本“示例”，然后我想要文本“示例”右侧的文本“bla1”和“bla2”。当有人放大和缩小他们的浏览器时，我也希望他们保持在一起。因此，在任何浏览器上进行 100% 和 200% 缩放都不会改变文本的相对位置。任何帮助深表感谢!如果 javascript 可以解决问题，我会使用 javascript。

这张照片解释了我想要什么

请在此处查看代码:https://codepen.io/anon/pen/KZBzmY#anon-login

HTML:

<div id="tophead">
  <a href="index.html">
    <h1 class="webHeader">Sample</h1>
    <h1 class="webHeader2">bla1</h1>
    <h1 class="webHeader3">bla2</h1>
  </a>
</div>

CSS:

#tophead {
  margin: 0px;
  padding: 0px;
  border: 2px solid black;
  position: absolute;
  left: 40%;
  font-family: Arial;
  color: #00284d;
}

#tophead h1 {
  margin: -2px;
}

#tophead a:link {
  text-decoration: none;
  color: #00284d;
}

.webHeader {
  top: -50%;
  left: -20%;
  font-size: 180%;
  position: relative;
}

.webHeader2 {
  text-align: right;
  font-size: 100%;
  position: relative;
}

.webHeader3 {
  text-align: right;
  font-size: 90%;
  position: relative;
}

Answer 1

我会建议你包装 bla1和 bla2文本在 <h2>然后使用 display: inline-block 。无需使用 position: absolute

Updated Codepen

#tophead {
  margin: 0px;
  padding: 0px;
  font-family: Arial;
  color: #00284d;
  text-align: center;
}

#tophead h1 {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

#tophead a:link {
  text-decoration: none;
  color: #00284d;
  display: inline-block;
  border: 2px solid #000;
}

.webHeader2 {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  margin-left: 20px;
}

.webHeader2 span {
  display: block;
}

.small {
  font-size: 90%;
}

<div id="tophead">
  <a href="index.html">
    <h1 class="webHeader">Sample</h1>
    <h2 class="webHeader2">
      <span>bla1</span>
      <span class="small">bla2</span>
    </h2>
  </a>
</div>