滚动时如何阻止Bootstrap输入框和按钮重叠页面的页眉和页脚?

时间:2016-04-06 07:46:35

标签: html css twitter-bootstrap

我遇到的问题是在一个基本的拍卖网页上(这个页面是为了展示而制作的,目的还没有用于拍卖系统),个别雕塑下面的输入框和按钮页面滚动时重叠页眉/页脚。此页面设计有移动UI,因此页脚中的导航图标以及页面在移动设备上显示时,由于需要滚动,重叠将成为问题。

我该如何解决这个问题?

        <title>Sculpture at Doddington</title>
</head>
<body>
    <div class="app">

        <div class="header">
            <br>
            <img src="/img/hall.png" class="mainlogo">
            <h1 style="font-family: 'bebas' !important;">Sculpture at Doddington</h1>
            <h2 style="font-family: 'bebas' !important;">July 30th - September 11th</h2>
            <br>
        </div>

        <br><br><br><br><br><br><br><br><br><br>
        <div class="content">

            <div class="exhibit-frame">

                <center><img src="/img/daisies.jpg" class="exhibit-image"></center>
                <br>
                <span class="exhibit-title">Daisies</span><br><br>
                <span class="exhibit-number">Number: 1</span><br>
                <span class="exhibit-artist">Artist: Lynn Baker</span><br>
                <span class="exhibit-material">Material: Kiln Formed Glass</span><br><br>
                <div class="row">  
                  <div class="col-lg-6">
                    <div class="input-group formgroup1">
                      <input type="text" class="form-control input1" placeholder="£">
                      <span class="input-group-btn">
                        <button type="button" class="btn-sm btn-warning">Bid</button>
                      </span>
                    </div><!-- /input-group -->
                  </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
                <br><br>
                <hr class="featurette-divider">
                <br>

            </div>

            <div class="exhibit-frame">

                <center><img src="/img/daisies.jpg" class="exhibit-image"></center>
                <br>
                <span class="exhibit-title">Daisies</span><br><br>
                <span class="exhibit-number">Number: 1</span><br>
                <span class="exhibit-artist">Artist: Lynn Baker</span><br>
                <span class="exhibit-material">Material: Kiln Formed Glass</span><br><br>
                <form>
                    <img src="/img/nocaptcha.gif">
                    <br><br>
                    <div class="input-group">
                       <input type="text" class="form-control bid_amount" placeholder="£">
                       <span class="input-group-btn">
                            <button class="btn-sm btn-warning auction_bid_button" type="button">Bid</button>
                       </span>
                    </div>
                </form>
                <br><br>
                <hr class="featurette-divider">
                <br>

            </div>

        </div> <!-- Content Div -->

        <footer class="footer">
            <p class="buttons">
                    <a href="/"><i class="fa fa-home icon1"></i></a>
                    <a href="/gardens"><i class="fa fa-map-marker icon2"></i></a>
                    <a href="/directory"><i class="fa fa-book icon3"></i></a>
            </p>            
        </footer>

    </div>

</body>

https://jsfiddle.net/iamjawa/u4cv31us/ - 当前代码(某些CSS用于网站上的其他页面,与此页面无关)

1 个答案:

答案 0 :(得分:2)

你需要像这样在页眉和页脚div中设置z-index

.header {
    width: 100%;
    background-color: #4F7776;
    text-align: center;
    font-weight: bold;
    top: 0;
    position: fixed;
    z-index:9;
}

.footer {
    position: fixed;
    height: 8%;
    background-color: #4F7776;
    width: 100%;
    bottom: 0;
    text-align: center;
  z-index:9;
}

这是一个工作小提琴:https://jsfiddle.net/u4cv31us/3/