html - 如何保持元素的位置为: absolute on the same position when resizing

Question

调整大小时如何将具有position:absolute的元素保持在同一位置？

我希望在输入中包含该按钮，但问题是当我尝试在父级上使用相对位置并在子级上使用绝对位置时，它无法按我想要的方式工作。

现在，当浏览器宽度为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/