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