Z-index 问题，z-index 没有正常工作

Question

我的问题是，每当链接悬停时，隐藏的子菜单都会将下面的 div 推到一起。我试过玩 z-index 但仍然没有运气。有人可以帮我解决这个问题吗？ my jsfiddle

HTML:

<div class="row" id="top-eybrow">
        <div class="eyebrow-section right text-left">
            <ul>
                <li>
                    <a href="#">Sign in</a>
                </li>
                <li>
                    <a href="#">Register</a>
                </li>
                <li>
                    <a href="#">My acount &nbsp;<i class="fa fa-sort-desc dropdown-i fa-fw"></i></a>
                    <ul>
                        <li>
                            <a href="#">Add listtings</a>
                        </li>
                        <li>
                            <a href="#">Update my profile</a>
                        </li>
                        <li>
                            <a href="#">View all listings</a>
                        </li>
                        <li>
                            <a href="#">My sales</a>
                        </li>
                        <li>
                            <a href="#">Messages</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Help</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="clearfix clear-columns"></div>
    <div class="row  clearfix leaderbord-ad">
        <img src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/Screen_Shot_2015-06-01_at_4.42.14_AM.png">
    </div>

CSS:

.eyebrow-section
{
    margin-right: -45px;
    position: relative;
    z-index: 100 !important;
}

.leaderbord-ad
{
    padding-top: 10px;
    position: relative;
    z-index: -100 !important;
}

Answer 1

这是一种解决方案

.leaderbord-ad
{
    padding-top: 20px;
    position: absolute;

}

Answer 2

Adam 的回答绝对有效，但是，当您添加其他元素时，它们会相对于图像不合适。在这种特定情况下，我建议更改

的解决方案

.eyebrow-section
{
margin-right: -45px;
position: relative;
z-index: 100 !important;
}

到

.eyebrow-section
{
margin-right: -45px;
position: absolute;
z-index: 100 !important;
}

然后，你可以改变

.leaderbord-ad
{
padding-top: 10px;
position: relative;
z-index: -100 !important;
}

到

.leaderbord-ad
{
margin-top:35px;
padding-top: 10px;
position: relative;
z-index: -100 !important;
}

我发现操纵导致问题的元素的位置更符合逻辑。这允许您将导航栏定位与其余页面元素的定位分开，因此添加的任何内容都将内嵌在您的图像下方。

Answer 3

如前所述，z-index 不是这里的问题。将此行添加到您的 css

.eyebrow-section ul ul {
    position: absolute;
}

https://jsfiddle.net/8L8rpscd/5/

Z-index 问题，z-index 没有正常工作

Z-index issues, z-index isn't working as it should

javascript

jquery

css

z-index