将文本定位为"保留在右下角"

Question

我试图让文本留在右下角，但是一旦我更改了窗口的高度或宽度，它就会超出曲线(如图所示)

我尝试用百分比、vw、vh、em 定位它，当屏幕尺寸发生变化时，它仍然超出曲线。

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

这是代码：

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

Answer 1

试试这个。在 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;}

Answer 2

尝试以下操作将文本设置为相对于右下角的固定位置：

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

Answer 3

Wu。我想我有一个解决方案给你。

我认为你需要一些东西的组合。来了...

首先，我认为您需要将自己的位置设置为相对。

其次，您需要在 css 中使用"转换：翻译;"设置，但使用之前使用的任何百分比将文本保留在您想要的位置。您可以将这些"y"和"x"百分比放在css代码的"翻译"部分中。

为什么我认为这会起作用？

当您为网页(或任何类型的背景)创建全屏视频背景时，使用代码的"转换：翻译"方面来帮助确保背景无论如何都保持居中是很常见的做法。

如果你考虑一下，你告诉CSS要做的是将项目动画化到你告诉它的位置，无论浏览器的条件或大小如何。

使用该概念，无论您希望项目在屏幕上处于什么位置，无论它是否居中，"转换：翻译"都应该有效。几个月前，一位非常有经验的工程师告诉我，所有的工程(包括编码)都是关于理解概念的，因为没有两种情况需要完全相同的答案。因此，学习的秘诀是学习如何适应和应用概念。

不好意思。。。切线！

无论如何，我认为这种方法会奏效，即使我无法为您提供确切的代码。

还有一件事...

如果"位置：相对"与我告诉您的内容不起作用，请尝试"位置：绝对"。

我希望这有所帮助！