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

正如所说的z-index不是问题所在。将此行添加到css

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

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

Answer 3

亚当的答案肯定有效，但是，当你添加附加元素时，它们将相对于图像不合适。在这种特殊情况下，我建议改变解决方案

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

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

Z-index问题，z-index不能正常工作

3 个答案: