gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:31:29 24 4
gpt4 key购买 nike

我遇到的问题是在一个基本的拍卖网页上(这个页面目前是为了展示而设计的,目前还没有打算有一个正常运作的拍卖系统),各个雕塑下面的输入框和按钮滚动页面时与页眉/页脚重叠。此页面采用移动 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 用于网站上的其他页面,与此页面无关)

最佳答案

那么你需要像这样在页眉和页脚 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;
}

这是一个有效的 fiddle :https://jsfiddle.net/u4cv31us/3/

关于html - 如何阻止 Bootstrap 输入框和按钮在滚动时与页面的页眉和页脚重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36444651/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com