jquery - 用响应覆盖图像上的文本

Question

我花时间努力在具有移动响应的图像上放置文本。实际上，我正在构建一个 HTML5 jQuery Mobile cordova 移动应用程序。

这是较小设备中的示例屏幕。

这是大设备中的示例屏幕。

我想将文本 Some Text 放置在图像的底部，与响应中心对齐。

这是在 jQuery Mobile 上生成图像和文本的代码。

<div class="ui-block-a">
  <div class="ui-bar" style="padding:5px">
    <img style="height: 100%;width:100%" src='img/book150.png'/>
     <p id="text">Some Text</p>
  </div>
</div>

尝试使用以下 CSS 样式，但这仅在我将图像大小固定为一种尺寸时才有效。

#text {
  z-index: 100;
  position: absolute;
  left: 150px;
  top: 350px;
}

Answer 1

你需要给 parent 一个position:relative才能让它工作。

要水平居中放置绝对的 block 元素，您需要应用此:

position:absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

来自 MDN

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor(non static). If a positioned ancestor doesn't exist, the initial container is used.

片段

.ui-block-a {
  position: relative;
  max-width:150px; /*you need to set a max-width/width */
}
.ui-bar {
  padding: 5px
}
#text {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
   /*demo*/
  bottom: 5px;
  background: red;
  max-width:100px;
  text-align:center

}
img {
  height: auto;
  max-width: 100%
}

<div class="ui-block-a">
  <div class="ui-bar">
    <img src='//lorempixel.com/150/150' />
    <p id="text">Some Text</p>
  </div>
</div>