将textarea或文本覆盖在图像HTML，angularJS中的CSS上

如何解决将textarea或文本覆盖在图像HTML，angularJS中的CSS上

我正在创建一个用于研究的网站。

虽然我正在创建文本区域和某些表单作品，

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

这是我想在下面做的一个例子 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

作为第二个示例，我想为“ hello”设置背景色。

解决方法

将元素放置在父对象的右下角

.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>