Question

我正在为我的网站编写CSS。我有文字，我正在我的背景图像。我的HTML和CSS如下：

HTML

<header class="site-header">


        <div class="site-header__menu-icon">
            <div class="site-header__menu-icon__middle"></div>
        </div>

        <div class="site-header__menu-content">
            <div class="site-header__btn-container">
                <a href="#" class="btn open-modal">Request A Demo</a>
            </div>
            <nav class="primary-nav primary-nav--pull-right">
                <ul>
                    <li><a href="#our-beginning" id="our-beginning-link">Home</a></li>

                    <li><a href="#testimonials" id="testimonials-link">Services</a></li>
                    <li><a href="#testimonials" id="testimonials-link">Why Us</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>


    <div class="section">
        <picture>
            <img src="assets\images\pepper.jpg">
        </picture>
        <div>
            <div class="section__text-content">
                <h1 class="section__title">Company</h1>
                <h3 class="section__sub-title">Company Slogan</h3>
                <div class="btn-container">
                    <a class="btn" href="#">Talk To A Specialist</a>
                    <a class ="btn btn__white btn__pepper-white" href="#">Get A Quote</a>
                </div>
            </div>
        </div>

    </div>

CSS

.section {
    position: relative; 
    max-width: 100%;

    &__text-content {
        position: absolute;
        top: 30%;
        width: 100%;
        margin-left:
    }

    &__title {
        font-size: 7rem;
        font-weight: 300;
        color: #ffffff;
        margin-bottom: 0;
    }

    &__sub-title {
        font-size: 2.5rem;
        font-weight: 300;
        margin-top: 3%;
        margin-bottom: 2%;
        color: #ffffff;
    }
}

当我尝试在我的CSS中向.section类添加一个margin-left时出现问题，因为我的屏幕右侧出现了一个空格，其中一个水平滚动条与我指定向左移动的保证金金额。

我知道我可以为我的css使用一个简单的“背景图像”，但我更喜欢用这种方式进行响应式成像（这是我学会如何做到这一点而且我有点像时间紧缩）。

有什么建议吗？

Answer 1

固定

我的问题是，我是通过以下方式写相对的保证金：

.section__text-content {
position: absolute;
margin-left: 10%
}

哪个错误，因为&__text-content设置为position: absolute

百分比是相对位置，绝对定位的图像需要绝对边距（即像素）

添加margin-left会创建水平滚动条到空白区域

1 个答案: