html - 如何让我的 Logo 覆盖蓝色横幅？

Question

有人可以帮我如何将我的地球标志覆盖在我的蓝色单杠上吗？谢谢!我附上了它的外观照片。我不想失去定位或任何东西。

CSS

.logo {
    display: inline-block;
    width: 100px;
    margin-left: 100px;
    margin-top: 20px;
    max-height: 100%;
}

.title {
    display: inline-block;
    font-size: 40px;
    vertical-align: top;
    margin-top: 50px;
    font-family: arial;
} 

#bannerTitle {
    background: steelblue;
    height: 60px;
    position: relative;
    margin-top: -50px;
    background: linear-gradient(steelblue, steelblue, white);
}

h2 {
    color: white;
    padding-left: 120px;
    padding-top: 11px;
    font-size: 30px;
}

HTML

<img class="logo" src="img/globe.png" alt="">
    <h1 class="title">The Inter<span>net</span></h1>
        <div id="bannerTitle">
            <h2>The World Wide Web</h2>
        </div>

Answer 1

https://www.w3schools.com/cssref/pr_pos_z-index.asp

需要添加z-index

#bannerTitle{
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue,
steelblue, white);
z-index: -1;
}