Перекрывающиеся абсолютные и / или относительные позиционные div

Question

    <div id="headContainer">

        <div id="blackBar">
            <div class="content">
                <img src="../Images/logo.png" class="logo" alt="logo" />
                <div id="clientSettings">
                    <div id="settingsContainer">
                        <ul>
                            <li><asp:LinkButton ID="endSession" OnClick="endSession_Click" Text="Exit" runat="server" /></li>
                            <li>not available</li>
                        </ul>
                    </div>
                </div>
                <div id="clientProfile"></div>
            </div>
        </div>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#clientSettings').click(function () {
                    $('#settingsContainer').toggle();
                });
            });
        </script>

        <div id="grayBar">

        </div>

    </div>

Хорошо, как вы могли догадаться из вышеизложенного, я пытаюсь показать #settingsContainer после нажатия #clientSettings с помощью jQuery. Я могу добиться этого с помощью метода .toggle(). Однако #settingsContainer необходимо перекрывать #grayBar.

Пожалуйста, смотрите ниже CSS:

headContainer:

#headContainer 
{
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100px;
    position            : fixed; <- or relative doesn't matter.
    z-index             : 1;
}

#headContainer div#grayBar
{
    top                 : 0;
    left                : 0;
    position            : relative; <- or fixed doesn't matter.
    width               : 100%;
    height              : 50px;
    background-color    : #f1f1f1;
    z-index             : 1;
}

clientSettings + settingsContainer:

#headContainer div#blackBar div#clientSettings
{
    float               : left;
    position            : relative;
    width               : 25px;
    height              : 50px;
    background-image    : url('../Images/Icons/endSession.png');
    background-repeat   : no-repeat;
    background-position : center center;
}

#headContainer div#blackBar div#clientSettings:hover 
{
    cursor              : pointer;
    background-color    : #636363;  
}

#headContainer div#blackBar div#clientSettings #settingsContainer
{  
    position            : relative; <- tried using absolute instead.
    top                 : 50px;
    left                : 0;
    padding             : 50px;
    background-color    : Green;
    z-index             : 99999; <- doesn't really matter.
}

Я пытаюсь найти способ, чтобы #settingsContainer перекрывал своих родителей и все остальное, сохраняя его в детстве #clientSettings.

Спасибо.

Answer 1

Это из-за float:left в #clientSettings, плавающие элементы выходят из потока рисования браузера, поэтому они начинают вести себя подобно элементам position:absolute. Вы можете удалить float:left или начать использовать z-index (как в #settingsContainer, так и в #clientSettings). Здесь работает демо с вашим кодом.