如何将 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 向右浮动，而我需要它留在左侧......抱歉，如果你不明白我的英语语法不确定，哈哈