2

我有一个代表徽标的 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 位置，但它变成了我不想要的东西。为什么要在不移动其正确位置的情况下使徽标 div 成为顶层？

4

5 回答 5

4

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

于 2014-02-27T11:15:35.180 回答
4

如果你想让它在 div 之上，你必须使用z-index. 您必须转换您的#logoand#slide才能拥有一个position属性，并且z-index应该将其应用于您要向上或向下移动其位置的 div。

于 2013-08-13T09:55:47.750 回答
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 属性的值决定了在哪一个下。

于 2013-08-13T09:58:40.623 回答
2

你错过了很多事情来做到这一点。

z-index会告诉你什么是最重要的。

位置必须是绝对的

你可能会用边距玩什么......

于 2013-08-13T10:01:06.460 回答
1

我用了这些：

#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 浮动到右侧，而我需要它留在左侧......对不起，如果你不明白我的英语语法不知道大声笑

于 2013-08-13T10:10:02.830 回答