Position Text in der unteren rechten Ecke zu bleiben

Question

Ich versuche, den Text Aufenthalt in der unteren rechten Ecke zu machen, aber wenn ich die Fensterhöhe oder Breite ändern, es geht aus der Kurve (gezeigt here)

I versuchte es mit Prozentsätzen, vw, vh, em und it still goes out of the curve Positionierung, wenn die Bildschirmgröße geändert wird.

Haben Sie eine Idee, wie Sie das positionieren, damit es immer in dieser Kurve bleibt, egal wie groß der Bildschirm ist? Hier

ist der Code:

.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

Versuchen Sie Folgendes, den Text zu festen Position relativ zu der unteren rechten Ecke zu setzen:

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

Answer 2

Try this .. Fügen Sie in html hinzu:

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

In CSS hinzufügen:

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

Answer 3

Wu. Ich denke ich habe eine Lösung für dich.

Ich denke, dass Sie eine Kombination von Dingen brauchen werden. Hier gehts ...

Zuerst, ich denke, Sie müssen Ihre Position auf relativ setzen.

Zweite, müssen Sie eine "transform: translate;" Setzen Sie in Ihrem CSS, aber verwenden Sie die Prozentsätze, die Sie zuvor verwendet haben, um den Text dort zu halten, wo Sie ihn haben wollten. Sie würden diese Prozentwerte "y" und "x" in den "translate" -Teil des css-Codes eingeben.

Warum denke ich, dass dies funktionieren würde?

Wenn Sie einen Vollbild-Videohintergrund für eine Webseite (oder einen Hintergrund) erstellen, ist es üblich, den "transform: translate" -Aspekt des Codes zu verwenden, um sicherzustellen, dass der Hintergrund zentriert bleibt egal was.

Und wenn Sie darüber nachdenken, was Sie dem CSS sagen, ist das Objekt in die Position zu animieren, in der Sie es sagen, unabhängig von der Bedingung oder Größe des Browsers.

Mit diesem Konzept sollte "transform: translate" funktionieren, egal welche Position auf dem Bildschirm ein Element haben soll, ob es zentriert sein soll oder nicht. Ein wirklich erfahrener Ingenieur hat mir vor ein paar Monaten gesagt, dass es beim gesamten Engineering (einschließlich der Codierung) darum geht, KONZEPTE zu verstehen, weil keine zwei Situationen genau die gleiche Antwort erfordern. Das Geheimnis des Lernens besteht also darin, zu lernen, wie man Konzepte anpasst und anwendet.

Entschuldigung ... tangential!

Wie auch immer, ich denke, dass dieser Ansatz funktioniert, auch wenn ich Ihnen keinen genauen Code liefern kann.

Noch eine Sache ...

Wenn "position: relative" nicht mit dem funktioniert, was ich dir gesagt habe, versuche "position: absolute".

Ich hoffe, dass hilft!