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

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

您只需将标签和输入包装在 DIV 和 position: relative 中。请参阅以下代码段。

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

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

How to keep element with position: absolute on the same position when resizing

html

css

responsive-design