我正在尝试创建一个循环浏览图片列表的网站。一切正常,但“下一页”和“上一页”按钮似乎隐藏在包含照片的<div>
下面。为什么z-index
没有纠正这个问题? (见两条标记线)
<?php error_reporting( E_ALL ); ?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
background-color: black;
}
</style>
</head>
<body>
<div class="cycle-slideshow"
data-cycle-loader="wait"
data-cycle-fx="fade"
data-cycle-timeout="0"
data-cycle-prev=".prevControl"
data-cycle-next=".nextControl"
data-cycle-center-vert=true
data-cycle-center-horz=true
<!--***** Z-INDEX FOR <DIV> WITH PICTURES *****-->
style="margin-top:-2%; margin-bottom: -3%; z-index: 1;">
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
<img src="pictures/Addison Dunne Portfolio.jpg" width="75%" height="75%">
<img src="pictures/Addison Dunne Portfolio10.jpg" width="75%" height="75%">
<img src="pictures/Addison Dunne Portfolio11.jpg" width="75%" height="75%">
</div>
<!--***** Z-INDEX FOR <DIV> WITH PREV/NEXT BUTTONS*****-->
<div align=center style="z-index: 2;">
<span class="prevControl" style="font-size: 35px;"><span style="color:gray"><<</span>     </span>
<span class="nextControl" style="font-size: 35px;"> <span style="color:gray">>></span></span>
</div>
</body>
</html>
注意:以下是我尝试使用的网站:http://kdrdetroit.com/AddisonDunne/index.php