绝对位置到容器助推器

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，而不是头部。对于相对的第一个父母来说，绝对定位的元素是如此。