如何將 div 放在另一個上面？

Question

我有一個代表徽標的 div，還有另一個代表幻燈片放映的 div。 幻燈片放映 div 位於徽標 div 下方，我希望它位於它下方和后面。

這就是我所擁有的：

HTML

  <div id="site-container">
    <div id="header-container">
    <div id="logo"></div>
    </div>
    
    <div id="slide"></div>
    </div>
   

CSS

#logo {
   background:url(img/logo.png) no-repeat left top;
   width:259px;
   height:147px;
   float:left;
}

#slide {
   background:url(img/slide.png) no-repeat left top;
   width:776px;
   height:437px;
   float:left;
}

我試圖使用 z 位置，但它變成了我不想要的東西。 為什么要在不移動其正確位置的情況下使徽標 div 成為頂層？

Answer 1

如果您希望它位於 div 之上，則必須使用z-index 。 您必須將#logo和#slide轉換為具有position屬性，並且應將z-index應用於要向上或向下移動其位置的 div。

Answer 2

嘗試以下操作：CSS

  #Behind{
    width:100%;
    background-color:orange;
    position: absolute;
    z-index: -1;
    padding:50px;
   }
  #TopOne{ 
    position: absolute;
    top:70px;
    left:50px;
    background-color:wheat;
    padding:20px; 
    }

和 htm 簡單地

    <div id="Behind"></div>
    <div id="TopOne">This is Just Testing :)</div>

這是 JSFiddle 鏈接也是JSFiddle

Answer 3

更正后的css是，

 #logo {
   background:url(img/logo.png) no-repeat left top;
   width:259px;
   height:147px;
   float:left;
   position:absolute;
   z-index:1000;
}

#slide {
   background:url(img/slide.png) no-repeat left top;
   width:776px;
   height:437px;
   float:left;
   position:relative;
   z-index:500;
}

幻燈片 div 的位置設置為相對位置，徽標 div 設置為絕對位置。 所以徽標被放置在幻燈片中。

z-index 屬性的值決定了在哪個之下。

Answer 4

你錯過了很多事情來做到這一點。

z-index會告訴你什么是最重要的。

位置必須是絕對的

你可能會用邊緣玩什么......

Answer 5

我用過這些：

#logo {
   background:url(img/logo.png) no-repeat left top;
   width:259px;
   height:147px;
   float:left;
   position:absolute;
   z-index:1;
}

#slide {
   background:url(img/slide.png) no-repeat left top;
   width:776px;
   height:437px;
   float:left;
   position:relative;
}

幻燈片放映現在應該是，但徽標 div 向右浮動，而我需要它留在左側......抱歉，如果你不明白我的英語語法不確定，哈哈