响应性问题 - 主图中的文本

Question

我需要帮助。我想创建一个英雄形象，但我在定位文本时遇到了问题。我希望它看起来像这样： enter image description here

当我按照自己的方式操作时，稍后我会遇到 RWD 定位问题。也许可以以某种方式更简单地做到这一点？

  <header>
          <div class="hero-img">
              <div class="hero-shadow"></div>
              <div class="hero-text">
                  <h1>Zięba</h1>
                  <p>gallery</p>
                </div>
                <i class="fas fa-chevron-down"></i>
      </header>

header {
.hero-img {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-image: url('../img/Kapiaca-sie-small.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    z-index: -2;
    overflow: hidden;

    .fa-chevron-down {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 95%;
        color: $white-color;
        font-size: 35px;
    }
}

.hero-text {
    position: absolute;
    transform: translate(1430px, -50px);
    height: 100%;
    z-index: 5;

    h1 {
        color: $black-color;
        font-size: 30rem;
        font-family: 'Disclaimer', sans-serif;
    }

    h1::before {
        content: 'Sławomir';
        position: absolute;
        display: inline-block;
        transform: rotate(270deg);
        top: 312px;
        right: 180px;
        font-size: 5rem;
        font-family: 'Roboto', sans-serif;
        color: $green-color;
    }

    p { position: absolute;
        top: 540px;
        right: 10px;
        text-transform: uppercase;
        color: $brown-color;
        font-size: 1.6rem;
    }
}

我正在向 CodePen 发送 link：https://codepen.io/Ewelaa/pen/MWoVwvY

Answer 1

header .hero-text {
  position: absolute;
  right:40px;
  height: 100%;
  z-index: 5;
}

只需使用右属性固定位置。

响应性问题 - 主图中的文本

Problem with responsiveness - Text in Hero-image

sass

position

responsive

positioning

hero