页脚菜单“下拉菜单”显示在上方

Posted 2023-02-16

【中文标题】页脚菜单“下拉菜单”显示在上方

【英文标题】：Footer menu "drop-up-menu" to display above

【发布时间】：2014-06-02 17:16:03

【问题描述】：

我自己得到了它，想把它留给以后有同样问题的人。因此，无需浪费您宝贵的时间来回答这个问题。

好的，所以我有一个固定的底部菜单栏。它有一个弹出菜单，并且它目前在任何时候都没有隐藏，因为它还没有必要。该栏固定在页面底部，并且有一个弹出框。问题是我无法将 popup 置于实际按钮之上。 这是我的代码： html

<div id="quickBar">
    <div id="menuCont">

        <div id="quickBarMenu">
            <p>Navigation</p>
            <ul>
                <li><p>Articles</p></li>
                <li><p>Blog</p></li>
                <li><p>Software</p></li>
                <li><p>Featured</p></li>
            </ul>
        </div>

    </div>
</div>

CSS

#quickBar
    width: 100%;
    height: 50px;
    position: fixed;
    display: absolute;
    z-index: 200;
    bottom: 0;
    background-color: grey;
    background-image: -webkit-linear-gradient(bottom,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
    background-image: -o-linear-gradient(top,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
    background-image: -moz-linear-gradient(top,rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%,rgba(59,70,71,0.2) 55%);
    background-image: linear-gradient(to top, rgba(59,70,71,0.4) 0%,rgba(59,70,71,0.4) 45%, rgba(59,70,71,0.2) 55%);
    opacity: 0.95;
    display: none;


#quickBar > #menuCont
    width: 960px;
    height: 50px;
    margin: auto;
    color: white;


#menuCont > div
    float: left;


#quickBarMenu
    width: 183px;


#quickBarMenu p
    width: 183px;
    height: 20px;
    padding: 15px 0;
    text-align: center;
    transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -moz-transition: background 0.2s linear 0s, color 0.2s linear 0s;
    -webkit-transition: background 0.2s linear 0s, color 0.2s linear 0s;


#quickBarMenu > ul
    /*display: none;*/
    list-style: none;

我希望有人可以帮助我。

【问题讨论】：

您在栏中有bottom: 0;。你认为它可能对其他元素有什么影响？

【参考方案1】：

好的，我自己使用负边距 margin-top 和值 -200px (4 x 50px)。