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/

即使屏幕尺寸发生变化，也要准确指定内容的位置

1 个答案: