css - 相对于窗口调整大小移动文本，将其保留在背景图像中

Question

我假设这个问题已经回答了很多次，但不幸的是，经过几个小时的搜索我仍然无法解决它。

有人能说出在调整窗口大小时保持文本相对于同级 div/图像的位置的最佳方法吗？

请找到附加的 fiddle :

.wrapper img  {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.text-box {
  z-index: 1;
  position: relative;
  top: 20px;
  left: 20px;
}

<div class="wrapper">
  <div class="text-box">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
  <a href="https://placeholder.com"><img src="http://via.placeholder.com/770x690"></a>
</div>

https://jsfiddle.net/ye5q4o2L/4/

Answer 1

您可以尝试这样的事情，它可能有助于您实现目标。

它不根据其 sibling 设置位置，而是相对于其大小由 child 确定的父级。

html,
body,
.wrapper {
  /* stopping overflow - just for example */
  height:100%;
  text-align: center;
}

.wrapper .img-wrapper  {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.wrapper img {
  z-index:1;
  
  /* stopping overflow - just for example */
  max-height:100%;
  width:auto;
  max-width:100%;
}

.text-box {
  z-index: 2;
  position: absolute;
  top: 20px;
  left: 20px;
}

.img-wrapper a {
 /* Set to block to capture the whole img element */
  display:block;
}

<div class="wrapper">
  <div class="img-wrapper">
    <div class="text-box">
      <p>lorem ipsum</p>
      <p>lorem ipsum</p>
    </div>
    <a href="https://placeholder.com">
      <img src="http://via.placeholder.com/770x690">
    </a>
  </div>
</div>

https://jsfiddle.net/ye5q4o2L/10/