ポジションテキスト右下隅に滞在する

Question

（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">+1 800-800-800</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

右下隅に固定された位置の相対的にテキストを設定するには、次の試してみてください：ここで

はコードがある

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

Answer 2

はこれを試してみてください。.. 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 3

呉を。私は私にあなたのための解決策があると思う。

あなたは物事の組み合わせが必要だと思います。ここに行く...

最初に、私はあなたの相対的な位置を設定する必要がありますと思う。

第2のの場合、 "transform：translate;"を使用する必要があります。あなたのCSSで設定しますが、あなたがそれを望む場所にテキストを保持するために以前に使用したパーセンテージを使用してください。これらの "y"と "x"パーセントをCSSコードの "translate"部分に入れます。

なぜこれが機能すると思いますか？

ウェブページのフルスクリーンビデオの背景（またはそのような背景の背景）を作成するときは、コードの「トランスフォーム：トランスレート」の部分を使用して、背景が中央にとどまるようにするのが一般的ですどんなものでも。

あなたが考えているのは、ブラウザの条件やサイズにかかわらず、アイテムの位置をアニメーション化することです。

このコンセプトを使用すると、画面上のどの位置にアイテムを置いても、それが中央に配置されるかどうかにかかわらず、「変換：変換」が機能するはずです。実際に経験を積んだエンジニアは数ヶ月前に、すべてのエンジニアリング（エンジニアリングを含む）は概念を理解することだと言いました。なぜなら2つの状況が全く同じ答えを求めないからです。したがって、学習の秘訣は、コンセプトをどのように適応させて適用するかを学ぶことです。

申し訳ありません...正接！

とにかく、私はあなたに正確なコードを提供できない場合でも、アプローチはうまくいくと思います。

もう1つ...

"position：relative"が私に言ったこととうまくいかない場合は、 "position：absolute"を試してください。

私はそれが助けてくれることを願っています！