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是，

 #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的位置设置为relative，logo div设置为absolute。因此徽标放在幻灯片中。

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

Answer 3

尝试以下方法： 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 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向右浮动，而我需要它留在左侧... 对不起，如果你不明白我不确定我的英语语法lol

如何把div放在另一个上面

5 个答案: