html - 将文字放置在右下 Angular

我试图使文本保留在右下角，但是一旦更改了窗口的高度或宽度，它就会超出曲线范围（显示为here）

当屏幕尺寸更改时，我尝试使用百分比，vw，vh，em和it still goes out of the curve定位它。

任何关于如何定位它的想法，无论屏幕大小如何，始终将其保持在该曲线内？

这是代码：

.phone-number {
  position: absolute;
  bottom: 20vh;
  right: 5vh;
  color: #472d23;
  font-weight: 600;
  font-size: 3vh;
}

.landing-page {
  background: url("../img/bg2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  background-position: center;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

.curve {
  background: url("../img/Curve.png");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
}

<div class="row">
  <div id="carasoul" class="landing-page">
    <div class="curve">
      <div class="container">
        <h3 class="phone-number">[phone]</h3>
      </div>
    </div>
  </div>
</div>

最佳答案

尝试这个。在HTML中，添加：

<div class="numBox">
    <p class="num">Your number or your stuff</p>
</div>

在CSS中，添加：

.numBox
    {position:relative;}
.num
    {position:absolute; bottom:0; right:0;}