絕對位置到容器助推器

Question

我在正確對齊文本到容器時遇到了問題。我需要把它放在圖片上的位置，但文字總是在頁面的右側。

你能幫我嗎？謝謝！

HTML：

<header> 
    <div class="container"> 
     <div class="header-text"> 
      <h3>My aligned heading</h3> 
     </div> 
    </div> 
</header> 

SCSS：

header { 
    width: 100%; 
    margin-top: 80px; 
    height: 518px; 
    background-image: url(../img/header.jpg); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    position: relative; 

    .container { 

     .header-text { 
      position: absolute; 
      right: 0; 
      bottom: 30px; 

      h3 { 
       font-weight: 400; 
       font-size: 18px; 
       text-transform: uppercase; 
       padding: 10px 10px 10px 45px; 
       border: 0; 
       border-radius: 0; 
       background-color: #fff; 
       text-align: right; 
      } 
     } 
    } 
} 

Answer 1

您應該設置position:relative;爲.container，而不是頭部。對於相對的第一個父母來說，絕對定位的元素是如此。