如何保持元素的位置:调整大小时在同一位置上绝对

Question

调整大小时如何保持元素的位置：绝对在同一位置？

我想在我的输入中使用按钮，但问题是当我尝试在父项上使用相对位置而在子项上使用绝对位置时，它无法按我的意愿工作。

现在，当浏览器的宽度为 375px 时，该元素位于正确的位置

也许有不同的解决方案？

<main class="page-main">
<h1 class="page-main__title">
<span>We're</span>
coming soon
</h1>
<p class="page-main__text">
Hello fellow shoppers! We're currently building our new fashion store. Add your
email below to stay up-to-date with announcemenets and our launch deals.
</p>
<form class="page-main__form">
<label for="email"></label>
<input
type="email"
class="page-main__input"
placeholder="Email adress"
id="email"
required
/>
<button name="submit" type="submit class="page-main__button">
<img src="images/icon-arrow.svg" alt="" />
</button>
</form>
</main>

.page-main {
width: 100%;
min-height: 100vh;
&__title {
display: block;
margin: 0 auto;
color: hsl(0, 6%, 24%);
padding-top: 3rem;
text-align: center;
font-size: 3rem;
font-weight: 600;
letter-spacing: 10px;
text-transform: uppercase;
width: 300px;
span {
color: hsl(0, 36%, 70%);
font-weight: 300;
}
}
&__text {
padding-top: 20px;
display: block;
margin: 0 auto;
width: 300px;
font-size: 14px;
font-weight: 400;
color: hsl(0, 36%, 70%);
text-align: center;
}
&__form {
display: flex;
justify-content: center;
flex-direction: row;
padding-top: 40px;
}
&__input {
width: 250px;
height: 40px;
border: 1px solid hsl(0, 36%, 70%);
border-radius: 28px;
opacity: 0.5;
position: relative;
}
}
input::placeholder {
color: hsl(0, 36%, 70%);
font-weight: 400;
padding-left: 20px;
}
button {
border-radius: 28px;
width: 80px;
height: 45px;
border: 0;
box-shadow: 0 3px 5px 1px hsla(0, 36%, 70%, 0.5);
background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%));
position: absolute;
right:60px;
}

Answer 1

您只需要使用position: relative将标签和输入包装在单个 DIV 中。 参考下面的代码片段。

JSFIDDLE： https://jsfiddle.net/hardyrajput/hfzmv230/28/