如何讓我的徽標覆蓋藍色橫幅？

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