使用 CSS 将一个 div 放在另一个 div 之上答案

【问题标题】：Place one div on top of the other div using CSS使用 CSS 将一个 div 放在另一个 div 之上
【发布时间】：2012-02-10 08:02:24
【问题描述】：

我有一个如下所示的登录按钮，当我尝试单击打开的菜单时，我有一个 ASP.Net 登录控件，它显示在我的滑块下方而不是上方。所以我想定位它在我的滑块顶部。在我的滑块和登录按钮之间我有菜单栏。

那我该怎么做呢？

我在 SO 上关注了这个 question 但没有成功

这是我的 CSS：

#container {
    width:780px;
    margin:0 auto;
    position: relative;
}
#topnavsignin {
    padding:10px 0px 12px;
    font-size:11px;
    line-height:23px;
    text-align:right;
    margin-top:-60px;
    margin-left:120px;
}
#topnavsignin a.signin { 
    background:#88bbd4;
    padding:4px 6px 6px;
    text-decoration:none;
    font-weight:bold;
    color:#fff;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    *background:transparent url('../images/signin-nav-bg-ie.png') no-repeat 0 0;
    *padding:4px 12px 6px;
    margin-left:420px;

 }
#signin_menu {
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    display:none;
    background-color:#ddeef6;
    position:absolute;
    width:350px;
    z-index:100;
    border:1px transparent;
    text-align:left;
    top: 24.5px; 
    right: 171px; 
    margin-top:-55px;
    margin-right: 0px;
    *margin-right: -1px;
    color:#789;
    font-size:11px;
    padding: 5px;

}

这就是我展示它的方式：

<div id="container">
   <fieldset id="signin_menu">
    //Asp.Net Login Control
    </fieldset>
</div>

//这是我的导航菜单

这是我的滑块部分

<div id="slider_wrap">
            <div id="wowslider-container1">
            </div>
 </div>

【问题讨论】：

标签： asp.net css html position

【解决方案1】：

要将一个 Div 放在另一个上，请在 css 上使用 z-index 和 position: absolute or relative or fixed

一些例子：

http://www.w3schools.com/cssref/pr_pos_z-index.asp

http://www.w3schools.com/css/css_positioning.asp

在您喜欢放在前面的容器上，设置比您喜欢放在后面的容器更大的 z-index。

注意：z-index只对position: absolute, relative, or fixed有效，你喜欢控制的div都有这个属性。 您提到的示例尝试在不具有此属性之一（或不使用 z-index）的情况下修复 div 的顺序，因此在示例中不能使用 z-index 并且它是一个棘手的方法在不启用 z-index 的情况下将一个放在另一个前面。

据我所知，您没有在其中一个中设置索引。

【讨论】：

@Aristos-效果很好。感谢您的链接。Z-index 是个好主意！.:)

【解决方案2】：

在你喜欢放在前面的容器上设置一个比你喜欢放在后面的容器更大的z-index。

请注意：z-index 仅适用于同一元素上的 position: absolute/relative/fixed;。您提到的示例尝试在没有此属性之一的情况下修复 div 的顺序（或不使用z-index）；如果不将z-index 与position 一起定义，就不可能将一个元素放在另一个元素的前面。

【讨论】：