如何把div放在另一个

嘿家伙我有div代表的标志，我有另一个div代表幻灯片放映。 幻灯片放映div在logo 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位置，但它变成了我不想要的东西。 任何为什么要将logo div作为顶层而不移动其正确位置？

谢谢

---

如果你想要在div的顶部，你必须使用z-index 。 您必须将#logo和#slide转换为position属性，并将z-index应用于您想要向上或向下移动位置的div。

---

更正后的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的位置被设置为相对，并且logo div被设置为绝对。 所以标志放置在幻灯片中。

z-index属性的值决定了哪一个属于哪个属性。

---

尝试以下方法：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

链接地址: http://www.djcxy.com/p/75851.html

上一篇: How to put div over another

下一篇: Show angular