Float DIV с центром над другим DIV

Question

Я пытаюсь расположить div над другим, но в центре (ширина).

РЕДАКТИРОВАТЬ: я хочу, чтобы контейнер контейнер был над верхним div и центрирован.

Текущий CSS:

body {
    background-color: #FFF;
    margin: auto;
}

#top {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
    height: 150px;
    position: relative;
}

#container {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 920px;
    height:300px;
    position: absolute;
    top:0;
    right:auto;
}

Вот что я получаю:

Answer 1

установлено влево: 50% и поле слева: -460px (половина ширины div)

Answer 2

Попробуй это. Это не проверено, но в основном вам нужно установить контейнер div в относительный, а затем div внутри него в абсолютный.

body {
        background-color: #FFF;
        margin: auto;
    }

#top {
    background-color: #F2F2F2;
    border-bottom: 1px solid #CCC;
    top: 50%;
    left: 50%;
    position: absolute;
}

#container {
    background-color: #FFF;
    border: 1px solid #CCC;
    width: 920px;
    height:300px;
    position: relative;
    right:auto;
}

Answer 3

Я бы посоветовал установить атрибут позиции # top в абсолютное значение и использовать небольшой javascript, чтобы установить левый атрибут в значение # контейнера слева + половина ширины # контейнера - половина ширины # top.

т.е. после включения jQuery (не проверено):

$(document).ready(function(){ <br /> var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2); <br /> $("#top").css("left", topLeft); <br /> });

В случае, если left равно нулю, как в приведенном вами примере, термин $ ("# container"). Css ("left") не нужен.

РЕДАКТИРОВАТЬ: Вы также должны быть уверены, чтобы установить атрибуты z-index двух div'ов соответствующим образом.