Jquery 重叠绝对和/或相对定位div 客户端设置+设置容器： #headContainer div#blackBar div#clientSettings { 浮动：左； 位置：相对位置； 宽度：25px； 高度：50px； 背景图像：url（'../Images/Icons/endSession.png'）； 背景重复：无重复； 背景位置：中心； } #headContainer分区#blackBar分区#客户端设置：悬停 { 光标：指针； 背景色：#636363； } #headContainer div#blackBar div#clientSettings#settings container { 位置：相对；

这是因为在

#clientSettings

中，浮动元素来自浏览器的绘图流，因此它们的行为开始类似于

位置：绝对

元素。您可以删除

浮动：左

或开始使用z索引（在

#settings container

和

#clientSettings

中）。下面是您的代码。

+1：我希望所有用户都能在他们的问题上投入这么多精力：）我是否可以将这两个元素都封装在另一个div中，并在该div上应用“clearfix”呢？你认为这也是一个合适的解决方案吗？在“clearfix”下你是什么意思？你能在JSFIDLE上展示一个例子吗？其实这并不是我之前发现的一种清除浮动元素的方法，它可以将所有内容对齐。我无法摆脱float:left它会破坏设计，因为主要方向是rtl。我尝试添加.clearfix类，也无法解决此问题。从#grayBar删除位置：relative和top/left成功。我仍然会接受你的答案，因为它解释了一个解决方案，因为你花了时间回答我。谢谢！

    <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>

#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;
}

#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.
}