HTML、 Bootstrap 、CSS : Fixed div as Header - Remove transparency

Question

我已经用position: fixed; 创建了一个header div，但它是透明的，所以当用户滚动页面内容时，滚动通过“header”。我尝试将 opacity: 1 添加到我的页眉 div，但这只会使整个 div 变白，而且我在页眉中看不到任何内容。如何使标题“实体”？

JSFiddle:http://jsfiddle.net/QzTU9/8/

代码:

<div id="topHeader" style="position: fixed;">
    <div class="row" style="height: 85px;">
        <div class="col-sm-3">
            {% if app.request.get('_route') == 'home' %}<img src="{{asset('images/logo/logo3.png')}}" style="max-height: 90px; max-width: 100%;">
            {% elseif app.request.get('_route') == 'products' %}<img src="{{asset('images/logo/logo3.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'register' %}<img src="{{asset('images/logo/logo3.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'who_we_are' %}<img src="{{asset('images/logo/logo1.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'contact' %}<img src="{{asset('images/logo/logo1.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'testimonials' %}<img src="{{asset('images/logo/logo1.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'how' %}<img src="{{asset('images/logo/logo2.png')}}" style="max-height: 90px;">
            {% elseif app.request.get('_route') == 'faq' %}<img src="{{asset('images/logo/logo2.png')}}" style="max-height: 90px;">
            {% else %}<img src="{{asset('images/logo/logo4.png')}}" style="max-height: 90px;">{% endif %}   
        </div>
        <div class="col-sm-5"></div>
        <div class="col-sm-4">
            <form role="form" class="form form-horizontal form-login" id="loginForm" style="font-size: 10px;">
                <br>
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="col-sm-4">  
                        <div class="form-group">
                            <input type="text" id="username" name="_username" class="form-control small-input" placeholder="USERNAME" data-validation-error-msg="Please enter username" data-validation="length" data-validation-length="min1">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <input type="text" id="password" name="_password" class="form-control small-input" placeholder="PASSWORD" data-validation-error-msg="Please enter password" data-validation="length" data-validation-length="min1">
                        </div>
                    </div>  
                    <div class="col-sm-3" style="text-align: right; padding-right: 0px;"><button style="width: 83px;" class="btn btn-default small-input"> LOGIN </button></div>
                </div>
                <div class="row">
                    <div class="col-sm-1"></div>
                    <div class="col-sm-8 text-center"><br style="font-size: 6px;"><a style="font-size: 12px;" onclick="$('#forgotPassword').modal('show');">FORGOT LOGIN DETAILS</a>
                    </div>
                    <div class="col-sm-3" style="text-align: right; padding-right: 0px;">
                        <a class="btn btn-default btn-sm" href="{{url('register')}}"> NEW USER </a> 
                    </div>
                </div>
            </form>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-12 text-center" style="font-size: 88%;">
            <span {% if app.request.get('_route') == 'home' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'home' %}<a href="{{url('home')}}">HOME</a>
                {%else%} HOME {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'who_we_are' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'who_we_are' %}<a href="{{url('who_we_are')}}">WHAT IS LITTLE GIANT?</a>
                {%else%} WHAT IS LITTLE GIANT? {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'how' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'how' %}<a href="{{url('how')}}">HOW DOES IT WORK?</a>
                {%else%} HOW DOES IT WORK? {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'products' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'products' %}<a href="{{url('products')}}">PRODUCTS</a>
                {%else%} PRODUCTS {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'testimonials' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'testimonials' %}<a href="{{url('testimonials')}}">SEE WHAT OTHERS SAY ABOUT US</a>
                {%else%} SEE WHAT OTHERS SAY ABOUT US {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'faq' %} style="color: black; font-weight: bold;" {%endif%}>
                {% if app.request.get('_route') != 'faq' %}<a href="{{url('faq')}}">FAQ</a>
                {%else%} FAQ {%endif%}
            </span> &nbsp; __ &nbsp;
            <spa {% if app.request.get('_route') == 'register' %} style="color: black; font-weight: bold;" {%endif%}> 
                {% if app.request.get('_route') != 'register' %}<a href="{{url('register')}}">REGISTER</a>
                {%else%} REGISTER {%endif%}
            </span> &nbsp; __ &nbsp;
            <span {% if app.request.get('_route') == 'contact' %} style="color: black; font-weight: bold;" {%endif%}> 
                {% if app.request.get('_route') != 'contact' %}<a href="{{url('contact')}}">CONTACT US</a>
                {%else%} CONTACT US {%endif%}
            </span>
        </div>
    </div>
</div>

原文:

滚动时:

Answer 1

这可能只是一个 z-index 问题

尝试添加

z-index: 9999;

到你的固定标题div