html - 背景图像总是在固定标题下，而不是在下面

Question

我在使用标题和背景图片时遇到问题。我在顶部有一个带有以下 HTML 的标题。

<section class="blackbannerTop">
    <section class="sponsorlogos">
        <img id="sponsorlogo1" src="logo.png" alt="Sponsor logo">
    </section>
</section>

然后我有一个带有背景图像的部分，应该放在标题下方：

<section id="carBanner">
    <section id="siteLinks">
        <ul class="linklist">
            <li class="linklines"><a id="link1">Link 1</a></li>
            <li class="linklines"><a id="link2">Link 2</a></li>
        </ul>
    </section>
</section>

这是两个元素的css：

.blackbannerTop {
height: 80px;
width: 100%;
background-color: black;
position: fixed;
z-index: 2;}

#carBanner {
height: 450px;
position: relative;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
background-size: cover;}

我已经尝试过填充顶部和边距顶部。边距顶部移动标题以及背景图像，但填充顶部仅移动背景图像顶部的渐变。所以我的问题是如何让背景图像显示在标题下方，现在图像从屏幕顶部开始，因此没有显示 90 像素的图像。

Answer 1

#carBanner {
height: 450px;
position: relative;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
background-size: cover;
clear:both;
top:90px;
}

Answer 2

如果您希望标题覆盖背景的前 90 像素，从屏幕顶部开始，那么您需要将定位更改为绝对位置并添加一个顶部值。

#carBanner {
    position: absolute;
    top: 0;

    .
    . as before
    . 
}

Answer 3

尝试这个

#carBanner {
    top: 80px;
    height: 450px;
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
    background-size: cover;
}