Question

我是使用Bootstrap的新手，我遇到了让我的下拉列表在移动设备上工作的问题。我的所有代码都在浏览器上完美运行，但是当我去手机游戏时，下拉列表不会出现在任何元素之前。我已经尝试将z-index设置为大量数字，并移动应该位于z-index下方下拉列表后面的元素。似乎什么都没有，所以我的导航将在其他元素面前。我将在下面发布我的代码。我还要提一下，当在小型桌面浏览器窗口中使用下拉列表时，它可以按预期工作。该问题仅发生在IOS Safari上。任何帮助都会很棒，谢谢！

HTML：

<div id="main_section">
    <div class="container">
        <!-- Navigation and Logo -->
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">COILERZ</a>
            </div>
            <div class="collapse navbar-collapse pull-right navlapse" id="collapse">
                <ul class="nav navbar-nav" id="navigation">
                    <li><a href="about.php">About</a></li>
                    <li><a href="contact.php">Contact</a></li>
                    <li><a href="terms.php">Terms</a></li>
                    <li id="hide"><a>|</a></li>
                    <li><a href="#login">Login</a></li>
                    <li><a href="#sign_up">Sign Up</a></li>
                </ul>
            </div>
        </nav>
        <!-- Search Form -->
        <div id="search_container">
            <img src="images/logo.png">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 pull-center">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for a coil or wire">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

#main_section {
width:100%;
height:334px;
background-color:$darkGrey;
color:$lightGrey;

.navbar-default {
    background-color:transparent;
    border:none;
    height:75px;

    .navbar-brand {
        height:75px;
        line-height:45px;
        font-size:36px;
        color:$lightGrey;
    }

    button {
        border:none;
        height:75px;
        margin:0;

        span {
            background-color:$lightGrey;
        }

        &:hover {
            background-color:transparent;
        }
    }
}

#navigation {
    a {
        height:75px;
        line-height:45px;
        color:$lightGrey;
        background-color:$darkGrey;
        z-index:3;

        &:hover {
            cursor:pointer;
            text-decoration:underline;
        }
    }

    @media only screen and (max-width : 768px) {
        a {
            height:40px;
            line-height:20px;
        }
    }
}

#search_container {
    z-index:-200;
    img {
        width:128px;
        position:absolute;
        left:0;
        right:0;
        margin:auto;
    }

    .pull-center {
        float:none;
        margin:0 auto;
    }

    .input-group {
        position:relative;
        top:138px;

        input {
            background-color:$lightGrey;
            color:$darkGrey;
            border:none;
            height:41px;
        }

        button {
            width:125px;
            background-color:$blue;
            border:none;
            @include fadeBG(200ms);

            span {
                color:$lightGrey;
                font-size:24px;
            }

            &:hover {
                background-color:$green;
                @include fadeBG(200ms);
                cursor:pointer;
            }
        }
    }
}

}

Answer 1

Z-index要求元素具有诸如

之类的位置

Ziggy got 11
Zalgo got 9
Adele got 8
Jack got 2

可能会将其应用于错误的元素。

Answer 2

将z-index:添加到

.navbar-default:

类。

这应该会带来整个导航栏及其内容。

z-index在IOS上不适用于Safari

2 个答案: