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

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使它块元素。