javascript - 在 angularJS 中的图像 HTML、CSS 上重叠文本区域或文本

Question

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

当我创建文本区域和一些表单工作时，

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

这是我想在下面做的一个例子 这是截图的例子

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

谢谢！

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

这是第二个例子

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

标签： javascripthtmlcssangularjsoverlapping

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>