如何让我的徽标覆盖蓝色横幅？

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;
}

Answer 2

就像马蒂说的那样;你需要考虑z-index变量。 z-index所做的是同一堆叠环境中的中继元素。

从HTML标记中，我可以看到您的<img>和<div id="bannerTitle">是兄弟元素，因此它们位于相同的堆叠上下文中。因此，具有较高z-index的任何人都将显示在另一个之上。

这样做的一种方法是降级“bannerTitle”div，就像matti所做的那样：z-index:-1。

另一种方法是宣传<img>：.logo { z-index:99; }。

很高兴知道z-index仅适用于块元素，默认情况下img为inline，但您已将其设为inline-block的块元素