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

Question

I am creating a website for the study.

While I am creating text area and some form works,

I have no idea about how to overlap the image and text.

This is one example what I want to do below This is example of the screenshot

How to overlap the textarea or text over the image like the uploaded image??

Thanks!

<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

I want to make a background color for "hello" as the second example.

Answer 1

position the element to be on the bottom right of the parent

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