Html 如何将 div 放在另一个上面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18205926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put div over another
提问by David Rose
hey guys i have div that stand for the logo and i have another div that stand for a slide show. the slide show div is under the logo div and i want it to be under the it and behind it. this is what i have:
嘿伙计们，我有一个代表徽标的 div，还有另一个代表幻灯片放映的 div。幻灯片放映 div 位于徽标 div 下方，我希望它位于它下方和后面。这就是我所拥有的：
HTML
HTML
<div id="site-container">
<div id="header-container">
<div id="logo"></div>
</div>
<div id="slide"></div>
</div>
CSS
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;
}
i tried to use z position but it turns to be something i dont want it to. any why to make the logo div be a top layer without moving its correct position?
我试图使用 z 位置，但它变成了我不想要的东西。为什么要使徽标 div 成为顶层而不移动其正确位置？
thank you
谢谢你
回答by Nitesh
If you want it over top of the div, you have to use z-index. You have to convert your #logoand #slideto have a positionattribute and z-indexshould be applied to the div whose position you want to move up or down.
如果你想把它放在 div 的顶部，你必须使用z-index. 您必须将您的#logoand转换#slide为具有position属性，并且z-index应该应用于要向上或向下移动其位置的 div。
回答by Vinod VT
The corrected css is,
更正后的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;
}
The position of the slide div is set as relative and logo div is set as absolute. So the logo is placed within the slide.
幻灯片 div 的位置设置为相对位置，徽标 div 设置为绝对位置。所以徽标被放置在幻灯片中。
The value of z-index attribute decides which one is under.
z-index 属性的值决定了在哪个之下。
回答by Adel
Try the following: CSS
尝试以下操作：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;
}
and the htm simply
和 htm 简单地
<div id="Behind"></div>
<div id="TopOne">This is Just Testing :)</div>
This is the JSFiddle link also JSFiddle
这是 JSFiddle 链接也是 JSFiddle
回答by user2032040
You are missing quite a few things to do that.
你错过了很多事情来做到这一点。
z-indexwill tell you what comes on top.
z-index会告诉你什么是最重要的。
positionneeds to be absolute
位置必须是绝对的
And you may what to play with the margins...
你可能会用边缘玩什么......
回答by David Rose
i used these:
我用过这些：
#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;
}
and the slide show is now when it should be but the logo div float to the right while i need it to stay at the left side... sorry if you dont understand not sure about my english grammer lol
幻灯片放映现在应该是，但徽标 div 向右浮动，而我需要它留在左侧......对不起，如果你不明白我的英语语法不确定，哈哈
