在图像 HTML、CSS in angularJS 上重叠文本区域或文本

Question

我正在为研究创建一个网站。

虽然我正在创建文本区域并且某些表单有效，

我不知道如何重叠图像和文本。

这是我想在下面做的一个例子 This is example of the screenshot

如何像上传的图片一样将文本区域或文字重叠在图片上？？

谢谢！

<div class = "container">
   <img src = '/assets/img/Iphone.png' alt="Snow" width = "300" height = "530" style = "margin-top: -1300px; margin-left:-200px">
   <div class="centered" style = "margin-top: -800px; margin-left: -10px; padding: 10px;" src = '/assets/img/Iphone.png'>hello</div>
</div>

Here's second example

我想为“你好”做一个背景颜色作为第二个例子。

Answer 1

将元素定位在父元素的右下角

.wrapper {
  position: relative;
  width: 100%;
  height: 200px;
}

.wrapper textarea {
  width: 100%;
  height: 100%;
}

.wrapper .counter {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="wrapper">
  <textarea></textarea>
  <div class="counter">Foo</div>
</div>

在图像 HTML、CSS in angularJS 上重叠文本区域或文本

Overlapping the textarea or text over the image HTML, CSS in angularJS

html

javascript

css

overlapping

angularjs