容器引导程序的绝对位置

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

容器引导程序的绝对位置

Absolute position to container boostrap

html

css

containers

positioning

absolute