Поместите один div поверх другого div, используя CSS

Question

У меня есть кнопка входа, как показано ниже, и когда я пытаюсь нажать, открывается меню, в котором у меня есть элемент управления входом ASP.Net, который отображается под моим ползунком, а не над ним. Поэтому я хотел бы расположить это сверху моего слайдера. И между моим слайдером и кнопкой входа у меня есть строка меню.

Так как мне это сделать?

Я следил за этим вопросом на SO, но не смог

Это мой 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>

Answer 1

Чтобы расположить один Div над другим, вы используете z-index на css вместе с 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-индекс, чем на контейнерах, которые вы хотите видеть сзади.

Обратите внимание, что: z-index работает только для position: absolute, relative, or fixed, и элементы div, которыми вы хотите управлять, имеют эти атрибуты. Пример, который вы упоминаете, пытается исправить порядок делений без одного из этих атрибутов (или без использования z-index), , поэтому в примере нельзя использовать z-index, и это сложно.поместите один перед другим без включенного z-индекса.

Как я вижу, у вас нет установленного индекса в одном из них.

Answer 2

На контейнере, который вам нравится быть передним, установите z-index больше, чем на контейнере, на котором вы хотите быть сзади.

Обратите внимание: z-index работает только с position: absolute/relative/fixed; натот же элемент.Пример, который вы упоминаете, пытается исправить порядок элементов без использования одного из этих свойств (или без использования z-index);невозможно поместить один элемент перед другим без определения z-index вместе с position.