容器boostrap的绝对位置

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而不是标头。绝对定位的元素对于第一个父亲是相对的。