css - 即使屏幕尺寸发生变化，也可以准确指定内容的去向

Question

我试图在页面上的某处专门指定内容，我该怎么做才能使它始终位于完全相同的位置，即使屏幕尺寸发生变化也是如此？

jsfiddle = https://jsfiddle.net/4pkgfgwh/1/

<div class="container">
  <img src="http://i.imgur.com/iGIFvH6.png" style="width:354px;height:228px;">
  <div class="display">
    <p> Here is some Text</p>
  </div>
</div>

.container {
  text-align: center;
}

.display {
  position:absolute; 
  TOP:45px; 
  LEFT:350px; 
}

Answer 1

在父容器上使用position: relative:

HTML

   <div class="container">
      <div class="image-container">
        <img src="http://i.imgur.com/iGIFvH6.png">
        <div class="display">
          <p> Here is some Text</p>
        </div>
      </div>
    </div>

CSS

.container {
  width: 100%;
  text-align: center;
}

.image-container {
  display: inline-block;
  position: relative;
  width: 354px;
  height: 228px;
}

.container img {
  width: 100%;
}

.display {
  position: absolute;
  top: 10px;
  left: 200px;
}

JSFiddle 演示:https://jsfiddle.net/ompfnjc5/2/